如何在angular5中使用jquery .counterUp函数？

Question

我想为我的公司网站创建一个计数器视图，要执行此操作，我必须使用jquery counterUp函数。

即使为它添加了脚本标签，Angular也无法识别该功能。

if(st >= hT ){
  $('.counter').counterUp({
    delay: 10,
    time: 2000
  });

计数器应从零开始并达到确定的数字。

Answer 1

假设“ .counter”引用的元素是Angular组件，则应使用ViewChild而不是jQuery。

例如，如果该元素属于Counter类，则可能会获得更好的效果。

@ViewChild(Counter)
counter: Counter;

然后在代码块中，它看起来像这样。

if(st >= hT ){
  this.counter.counterUp({
    delay: 10,
    time: 2000
});

Answer 2

1. /安装jQuery

npm安装jQuery

2. /打开angular.json并找到脚本

  "scripts": [
  "node_modules/jquery/dist/jquery.min.js" ]

3. /转到您的组件，并在顶部声明此

declare var jQuery: any;

4. /和ngOnInit内

  (function ($) {
     if(st >= hT ){
         $('.counter').counterUp({
           delay: 10,
           time: 2000
         });
  })(jQuery);