1. 程式人生 > >angular4(2-2)angular腳手架引入第三方類庫(swiper)

angular4(2-2)angular腳手架引入第三方類庫(swiper)

inter dex script angular4 命令 ace http 全局 配置

試了好多方法,npm install 方法失敗了,下載到本地是可以使用的;

將swiper文件放到assets文件下;

技術分享圖片

項目目錄下:(命令行)

因為ts並不能準確識別js語法,所以需要用ts中的interface接口,將js轉化成ts並暴露出來

npm install @types/swiper --save
npm install @types/swiper --save-dev

備註:--save配置在生產環境;--save-dev配置在開發環境

在index.html文件裏引入:

<link rel="stylesheet" type="text/css" href="./assets/css/swiper-3.4.2.min.css" />
  <script type="text/javascript"  src="./assets/js/swiper-3.4.2.min.js"></script>

全局引入swiper

在typings.d.ts文件內 聲明全局的jquery對象。全局的對象一般都放在這裏聲明

技術分享圖片

組件裏寫入swiper的代碼結構:

技術分享圖片

啟動swiper:

技術分享圖片

angular4(2-2)angular腳手架引入第三方類庫(swiper)