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

Question

我有一个 Angular 6 项目，我想要 SVG 动画。

Vivus 是一个我想引入的 JavaScript 类。

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

我猜在那之后我需要在我的 app.module.ts 文件中添加这样的内容：“import * as Vivus from 'Vivus';” 和我的导入数组中的“Vivus”。

我需要采取哪些步骤才能在我的 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）vivus在类中添加ngAfterViewInit：

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

Answer 2

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

然后在订阅 Observable 确认数据并拥有一个对象后使用它，因为我*ngIf在标记上使用 an 来等待这个 observable 数据。

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