在 Angular 2 Component 中使用第三方 JS 庫

本文全部內容以 Angular 2 Quick Start 項目爲基礎，使用 TypeScript 語言。

---

如上圖，最近遇到一個需求，須要在一個剛啓動的 Angular 2 項目中使用 snap.svg 操做頁面上的 svg 元素作動畫。

我粗略的看了下， snap.svg 的實現彷佛並無聽從什麼模塊規範，就是常見的提供幾個全局變量完事。若是真的耿直的在 Component 中去用的話，會在執行 tsc 編譯成 js 文件這一過程當中報錯。

這是由於 TypeScript 編譯器並不知道 snap.svg.js 提供了怎樣的接口，因此當 ts 代碼中出現了 Snap() 時，編譯器會認爲咱們調用了一個不存在的方法而報錯。解決方式也很簡單，只須要使用 declare 告知 TypeScript 編譯器這個方法是在別處建立的，沒有出錯不用緊張:-)

簡單的方法

1. bower 或直接下載 snap.svg.js 文件。

2. 在 index.html 中引入這個 js 文件。

3. 在 app.component.js 上方加上這段聲明：declare var Snap: any, mina: any;

4. 照常使用便可

可是 Angular 2 的其餘模塊都是動態加載的，這裏寫死在 index.html 就感受有點弱逼，因此下一步是配置 SystemJS ，而後用它來加載 snap.svg 。

用上 SystemJS

若是你和我這裏同樣，是以 Angular 2 Quick Start 項目爲基礎，那麼你的 SystemJS 配置文件就是項目文件夾下的 systemjs.config.js ，最簡的配置只須要添加一行：

var map = { ... 'snap-svg': 'third-party/snap.svg-min.js', // 添加此行便可 };

你的文件名與路徑可能跟我不一樣，右側是相對於項目文件夾的相對路徑，看狀況修改便可。

這樣一來，咱們就能夠和 Angular 2 的其它組件同樣動態加載 snap.svg 了。

import { Component } from '@angular/core';

Angular 2 的官方文檔裏，常常能看到上面這種 import 形式。如前文所述， snap.svg 提供的交互方式是全局變量，那麼咱們的 import 語句還比上面的更簡單，最後是這個樣子的：

import 'snap-svn'; // 1. 加載 snap.svg declare var Snap: any, // 2. 消除 tsc 編譯器報錯 mina: any; ... var wave = Snap(this.el.querySelector('#wave')); // 3. 在 Component 中使用 snap.svg wave.animate({ transform: waveOverTrans }, 1500, mina.backout); ...