Ionic2中集成第三方控件Sweetalert

Ionic2混合開發，入坑系列：Ionic2中集成第三方控件Sweetalert

注：Sweetalert2已經能夠直接從npm中下載安裝 npm install --save sweetalert2，如下是集成sweetalert1

一、安裝Typings  

在命令行中輸入：npm install -g typings

安裝完成後，在命令行中輸入：typings --version

二、在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;

三、編寫引用 /// <reference path="sweetalert/index.d.ts" />

 

四、在declarations.d.ts文件中放置引用，而後就能夠直接使用，例子：

    swal({
      title: '<strong>您是否退出應用？</strong>',
      text: '您自定義的內容',
      type: "warning",
      showCancelButton: true,
      animation: 'slide-from-top',
      cancelButtonText: "取消",
      confirmButtonText: '退出應用',
      html: true
    }, (isConfirm) => {
      if (isConfirm) {
        this.platform.exitApp(); //退出平臺
      }
    });