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

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

1.全局安裝Typings

一、 npm install -g typings

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

一、 typings search swiper

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

一、 react-native-swiper dt     https://github.com/leecade/react-native-swiper#readme二、 swiper              dt     https://github.com/nolimits4web/Swiper三、 swiper/v2           dt     https://github.com/nolimits4web/Swiper

3.安裝js庫。

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

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

一、npm install swiper --save

　　接着使用typings安裝swiper插件

二、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文件中導入，並建立數據

一、 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"
    }
  ];
}

 二、截止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便可。

三、若是用第2步，typings search沒有搜索到你要的庫

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

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

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

而後第4步引用就同樣了。