如何在 Angular 7 上添加第三方插件 jquery？答案

【问题标题】：How to add third party plugin jquery on angular 7?如何在 Angular 7 上添加第三方插件 jquery？
【发布时间】：2023-03-17 10:54:01
【问题描述】：

您好，我一直在尝试在我的 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 ？

【问题讨论】：

可以分享一下模板吗？除非看到模板，否则很难判断出什么问题。
您需要为您的问题添加更多详细信息。由于您尝试访问元素的方式，这很可能不起作用。更好的方法是使用@ViewChild('.ultimasExecucoes'): ElementRef;
如何使用@ViewChild？
我尝试了很多东西，但在控制台上发现了这个错误：ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_7__(...).easyTicker is not a function at ExecucoesEncerradasComponent.push../src/app/execucoes- encerradas/execucoes-encerradas.component.ts.ExecucoesEncerradasComponent.ngAfterViewInit

标签： jquery angular angular7

【解决方案1】：

您好，在阅读了很多关于 jquery 类型的文章后，我解决了这个问题：

首先需要安装 jquery/types：npm install --save @types/jquery
在目录nodes_modules/@types 中我创建了一个文件夹“easyticker”（插件名称）
进入目录“easyticker”我创建了文件：index.d.ts 里面我放了这个：

声明模块'easyTicker'

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

在我的组件上，我导入了 jquery：

从 'jquery' 导入 * 作为 jQuery

然后我调用了我的插件：

ngAfterViewInit() {

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

【讨论】：