在 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);

...

前端技术发展的飞快,这阵子突然要捡回来头真心大。。。Happy coding~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

解决Command /usr/bin/codesign failed with exit code 1.rtfd

解决Command /usr/bin/codesign failed with exit code 1.rtfd

3022
来自专栏WindCoder

ubuntu 14.04 下安装 PyTesser 进行OCR识别

玩python期间,看到好多用python做的爬虫,感觉挺好玩,就开始了爬虫之旅的学习,期间受一些教程的启发想去试试学校的教务系统,可惜登录需要验证码,于是四处...

1541
来自专栏大葡萄元元

优化网站加载速度的14个技巧

优化了加载速度的网站不仅可以提高其搜索引擎的排名,同时也可以降低网站的跳出率,提高其转换率,还能提供更好的终端用户体验,这是当今基于Web环境取得成功的关键。

1473
来自专栏腾讯NEXT学位

JavaScript全栈开发-工具篇(下)

? 文章目录 ? 四、测试工具 1. 单元测试 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有: * ...

1142
来自专栏代码拾遗

那些值得一用的JS库

如果你是一个npm作者,强烈推荐使用np模块,它能为你轻而易举地解决更新版本、添加git发布tag和发布代码到npm,特别是当你有很多npm模块要维护的时候。

1633
来自专栏Jerry的SAP技术分享

SAP CRM点了附件的超链接后报错的处理方式

SAP CRM系统里,点击了附件的这些超链接后,如果是文本文件,会在浏览器里打开。如果是其他类型的文件,会弹出下载对话框。

1002
来自专栏macOS 开发学习

cocos2d-objc 3.0+ 游戏开发学习手册(四): 使用CocoaPods 管理cocos2d项目

使用官方的安装器cocos2d Installer创建的工程后,默认的cocos2d-ext路径下是不完整的.

832
来自专栏美丽应用

全局复制:允许你复制任何应用内文字

1931
来自专栏iOS Developer

微信小程序开发教程-从零开始(3)

2186
来自专栏QQ音乐技术团队的专栏

electron 构建跨平台桌面应用

昨日(2016.09.13)本文发表后,获得了一定的阅读和转发量,但经部分网友反馈和仔细审核后发现,在与 NW.js 对比的环节,言辞欠妥,且数据的真实性有待考...

1.1K10

扫码关注云+社区

领取腾讯云代金券