ionic3.0--angular4.0 引入第三方插件庫的方法

ionic3.0 引入第三方插件 (swiper)，方法很多，現詳細說明下官方推薦（typings）做法。

1.全局安裝Typings

1、 npm install -g typings

 2.搜索你想要的插件，如 swiper:

1、 typings search swiper

搜索結果如下（有3個swiper資源）：

1、 react-native-swiper dt     https://github.com/leecade/react-native-swiper#readme2、 swiper              dt     https://github.com/nolimits4web/Swiper3、 swiper/v2           dt     https://github.com/nolimits4web/Swiper

3.安裝js庫。

　（1）切換到你的項目根目錄下，運行如下命令行:

　　先是npm下載安裝swiper插件庫文件　　

1、npm install swiper --save

　　接着使用typings安裝swiper插件

2、typings install dt~swiper -global --save

4，使用swiper.js插件庫

（1）在你需要使用的page包內，在***.html文件中使用標簽

<!--頭部滾動條-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let item of headerSlideData">
          <img  class="swiper-img" alt="{{item.alt}}" src="{{item.src}}">
        </div>
      </div>
      <!-- 如果需要分頁器 -->
      <div class="swiper-pagination"></div>
    </div>

（2）在需要用到swiper插件的 ***.ts文件中導入，並創建數據

1、 import * as Swiper from 'swiper';

// 初始化頭部滾動條
private initHeaderSlide() {
  this.oSwiper1 = new Swiper('.swiper-container', {
    slidesPerView: 1,
    paginationClickable: true,
    centeredSlides: true,
    autoplay: 2000,
    autoplayDisableOnInteraction: false,
    loop: true,
    // 如果需要分頁器
    pagination: '.swiper-pagination',
    // 改變自動更新
    observer:true,
    observeParents:true
  });

}

private getHeaderSlideData() {
  return [
    {
      alt: "雙十一預熱主場會",
      src: "assets/img/home-headerSlide-1.jpg"
    },
    {
      alt: "11月11天家電低價不停歇",
      src: "assets/img/home-headerSlide-2.jpg"
    },
    {
      alt: "家具盛典 好貨提前搶",
      src: "assets/img/home-headerSlide-3.jpg"
    },
    {
      alt: "IT搶券節",
      src: "assets/img/home-headerSlide-4.jpg"
    },
    {
      alt: "潮流數碼 雙11爽購攻略",
      src: "assets/img/home-headerSlide-5.jpg"
    }
  ];
}

 2、截止2017年11月07日，在執行npm install swiper --save時，npm會自動下載最新的swiper插件（我的swiper 4.0.3），實際調試中發現，該版本編譯運行后，生成一堆不符合js語法的錯誤代碼。

解決辦法：

（1）在package.json文件中修改swiper擴展庫的版本號為3.4.2。

（2）重新執行npm install 命令安裝當前版本的swiper插件。

（3）重新執行ionic cordova build (run) android即可。

3、如果用第2步，typings search沒有搜索到你要的庫

但是，npm可以搜到相關ts文件，一定要是ts文件（比如ng開頭的，如ng-circle-progress），才會有*.d.ts聲明文件，才可以直接引用

例如：circle-progress這個庫在typings搜索沒有，但是可以：

1、 npm search circle-progress （npm搜索插件有插件存在）
2、 npm install ng-circle-progress --save （使用 npm 安裝所需要的插件）

然后第4步引用就一樣了。