Question

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

Vivus是我要包含的JavaScript类。

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

我猜想那之后，我需要在app.module.ts文件中放入类似的内容：“从'nivus'导入*作为Nivus；”和“ Nivus”在我的导入数组中。

要在我的角度项目中包含Nivus 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等待此可观察数据。

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

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

2 个答案: