首页 > 解决方案 > 如何在 Angular 2+ 项目中包含 Vivus Javascript

问题描述

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

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

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

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

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

标签: angularvivus

解决方案


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

1)npm i -S vivusnpm 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 >
}

推荐阅读