如何在 angular 7 上添加第三方插件 jquery？

Question

嗨，我一直在嘗試在我的 App Angular 7 上添加第三方 jquery 插件。到目前為止，我已經完成了：在 angular.json 中添加了如下文件的位置：

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/js/ticker/jquery.easy-ticker.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]

在我的 AppComponent 中：

declare var $: any; interface JQuery { easyTicker(options?: any):
JQuery; }

嘗試執行：

 ngAfterViewInit() {

    $('.ultimasExecucoes').easyTicker({
      visible: 1,
      interval: 4000
    });
}

在我的模板中

<div class="ultimasExecucoes">
            <ul>
            <li *ngFor="let workFlow of execucoesEncerradas"> 
                {{workFlow.nomeWorkFlow}} - Data Início: {{workFlow.dataInicioWf | date : 'dd/MM/yyyy HH:mm:ss'}} 
                - Data Encerramento: {{workFlow.dataEncerramentoWf | date : 'dd/MM/yyyy HH:mm:ss'}} 
                - Resultado: {{workFlow.resultadoExecucao}}
            </li>
            </ul>
        </div>

但是我的頁面上沒有任何反應。 如何添加插件 jquery ？

Answer 1

嗨，在我閱讀了很多關於 jquery 類型的文章后，我解決了這個問題：

1. 首先你需要安裝 jquery/types: npm install --save @types/jquery
2. 在目錄nodes_modules/@types內我創建了一個文件夾“easyticker”（插件名稱）
3. 進入目錄“easyticker”我創建了文件：index.d.ts里面我把這個：

聲明模塊“easyTicker”

接口 JQuery { easyTicker(options?: any): JQuery; }

4. 在我的組件上，我導入了 jquery：

從 'jquery' 導入 * 作為 jQuery

5. 然后我調用了我的插件：

ngAfterViewInit() {

 /* JqueryEasyTicker */ (<any>$)( document ).ready(function() { (<any>$)('#ultimasExecucoes').easyTicker({ visible: 1, interval: 8000 }); }); }