在 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 编译器这个方法是在别处创建的，没有出错不用紧张:-)
简单的方法
bower 或直接下载 snap.svg.js 文件。
在 index.html 中引入这个 js 文件。
在 app.component.js 上方加上这段声明：declare var Snap: any, mina: any;
照常使用即可
但是 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);
...
前端技术发展的飞快，这阵子突然要捡回来头真心大。。。Happy coding～
关键字：angular2, JavaScript, snap.svg, node.js
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
