前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在 Angular 2 Component 中使用第三方 JS 库

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

作者头像
Alan Zhang
发布2018-10-19 14:52:49
1.9K0
发布2018-10-19 14:52:49
举报
文章被收录于专栏:Alan's Lab

本文所有内容以 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 ,最简的配置只需要添加一行:

代码语言:javascript
复制
var map = {
    ...
    'snap-svg': 'third-party/snap.svg-min.js', // 添加此行即可
};

你的文件名与路径可能跟我不同,右侧是相对于项目文件夹的相对路径,看情况修改即可。

这样一来,我们就可以和 Angular 2 的其它组件一样动态加载 snap.svg 了。

代码语言:javascript
复制
import { Component } from '@angular/core';

Angular 2 的官方文档里,经常能看到上面这种 import 形式。如前文所述, snap.svg 提供的交互方式是全局变量,那么我们的 import 语句还比上面的更简单,最后是这个样子的:

代码语言:javascript
复制
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~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简单的方法
  • 用上 SystemJS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档