以G6为例,介绍angular项目引入第三方原生js库的办法——angular G6

angular是目前国内并不火的一个框架,由于公司高层选型,笔者不得不使用之。用惯了之后觉得也挺好,也能做出很棒的效果。但笔者经常会遇到一个问题,由于angular全面采用typescript写法和独特的项目组织方式,有时需要引入某些第三方原生js库,这些库并没有angular版本,用法也是像传统JavaScript一样,和angular风格迥异。

刚开始时,笔者经常会选用一些有angular版本的第三方库,例如https://swimlane.github.io/ngx-graph/这样的一些传统js库的angular版本。然而久而久之,由于angular版本的第三方库太少,根本无法满足需求,并且这些库用的人少,bug也多,不成气候。所以不得不重新转向使用原生js库,所以有个问题就不得不面对了,如何在angular项目中引入第三方原生js库

本文以蚂蚁金服的可视化方案AntV-G6为例,描述如何在angular项目中引入原生的G6 JavaScript库。如果我们想引入这个工作流图,https://antv.alipay.com/zh-cn/g6/2.x/demo/flow/work-flow.html,该怎么做呢?

  1. 假设我们新建了一个angular项目,并且就打算在app.component中画这幅图。为了专注如何引入js库这个主题,避免不同版本的坑,本文不使用npm安装G6,而是直接将这两个文件复制下来,保存在src/assets/js目录下。分别命名为g6.js和plugins.js

  2. 打开angular.json,在scripts下加入
    "src/assets/js/g6.js","src/assets/js/plugins.js"
    以G6为例,介绍angular项目引入第三方原生js库的办法——angular G6_第1张图片
  3. 在src/app/app.component.html中加入 

     

  4.  

    在src/app/app.component.ts中新写一个函数,比如render(),并将https://antv.alipay.com/zh-cn/g6/2.x/demo/flow/work-flow.html中

你可能感兴趣的:(以G6为例,介绍angular项目引入第三方原生js库的办法——angular G6)