提问者:小点点

Angular中的Counter Up v2插件(动画计数器)


我想用Angular(Angular CLI:11.2.2,Node:14.16.0,OS:win32 x64)使用Counter-Up插件(Counter-Up v2)的动画数字计数,但我有问题使它工作。

  1. 已安装[npm install Counterup2--Save]
  2. [从“counterup2”导入{counterUp};]在app.ts.module中导入-使用信息:声明了“counter up”,但从未读取其值。
  3. [声明模块“Counterup2”;]在新文件“counterup.t.ds”中添加
  4. 我在packages.json:“counterup2”:“^1.0.4”和package-lock.json中看到它
  5. 我应该添加代码:
counterUp(document.querySelector('.counter') {
  duration: 1000,
  delay: 16
})

但我不知道怎么做错了--我试过用不同的词,得到的信息是,“,”应该代替{

到底应该把这个代码放在什么地方才能使用它呢?

imports: [
     counterUp,
...

i'v获得错误:“src/app/app.component.html:1:1-error NG8001:”router-outlet“不是已知元素”(app.component.html的内容仅为:)


共1个答案

匿名用户

你的步骤从第2步开始就错了。

安装软件包后(它是软件包,而不是插件),

  1. 在app.component.html上创建html元素
    1,123,456下载
  2. 并在app.component.ts.ts上导入它,如从“counterup2”导入counterUp
  3. 现在在它的ngonit上编写代码
const el = document.querySelector( '.counter' )

// Start counting, do this on DOM ready or with Waypoints.
counterUp( el, {
    duration: 1000,
    delay: 16,
} )

演示:https://stackblitz.com/edit/Angular-ivy-so-66548954