如何在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);