如何在Angular 2+项目中包含Vivus Javascript

Question

我有一个角度6项目，我想SVG动画。

Vivus是一个我想介绍的JavaScript类。

第一步显然是在项目文件夹中运行"npm install vivus“。

我猜之后我需要在我的app.module.ts文件中放入类似这样的内容："import * as Vivus from 'Vivus';“和"Vivus”in我的imports数组。

我需要采取哪些步骤才能在我的angular项目中包含Vivus SVG动画？

Answer 1

我通过执行以下步骤解决了这个问题：

1) npm i -S vivus和npm i -D @types/vivus

2)打开angular.json文件，将以下值添加到脚本数组中："node_modules/vivus/dist/vivus.js"

3)在您的组件中添加这一行：import * as vivus from 'vivus';

5)在ngAfterViewInit的类中添加vivus

ngAfterViewInit() {
    const hi = new vivus('animateWeb', {type: 'sync', duration: 300, start: 'autostart', dashGap: 2, forceRender: false},);<br >
}

Answer 2

我认为您可以像这样导入库：import * as vivus from 'vivus';

当我在标记上使用*ngIf来等待这个可观察数据时，在订阅一个可观察对象确认数据并拥有一个对象之后，就会使用这个对象。

const x = new vivus('my-svg-id', this.after());