Ionic2中集成第三方控件Sweetalert

Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert

注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2,以下是集成sweetalert1

1、安装Typings  

在命令行中输入:npm install -g typings

安装完成后,在命令行中输入:typings --version

2、在typings文件夹中创建一个*.d.ts文件,代码如下:

/**
 * 第三方库sweetalert声明文件
 * 
 * @author dane
 * 
 * @interface SwalStatic
 */
interface SwalStatic {
    /**
     * A basic message
     * simple:swal("Here's a message!")
     */
    (content: string);
    /**
     * A title with a text under
     * simple:swal("Here's a message!", "It's pretty, isn't it?")
     */
    (content: string, description: string);

    /**
     * A success message!
     * simple:swal("Good job!", "You clicked the button!", "success")
     */
    (content: string, description: string, type: string);

    /**
     * A warning message, with a function attached to the "Confirm"-button...
     * simple:http://t4t5.github.io/sweetalert/
     */
    (options: any, fn?: any);
}


declare var swal: SwalStatic;

3、编写引用 ///

 

4、在declarations.d.ts文件中放置引用,然后就可以直接使用,例子:

    swal({
      title: '您是否退出应用?',
      text: '您自定义的内容',
      type: "warning",
      showCancelButton: true,
      animation: 'slide-from-top',
      cancelButtonText: "取消",
      confirmButtonText: '退出应用',
      html: true
    }, (isConfirm) => {
      if (isConfirm) {
        this.platform.exitApp(); //退出平台
      }
    });

 

你可能感兴趣的:(Ionic2中集成第三方控件Sweetalert)