如何在angular 7上添加第三方插件jquery? [英] How to add third party plugin jquery on angular 7?

问题描述

我一直在尝试在我的App Angular 7上添加第三方jquery插件.到目前为止，我已经完成了:在angular.json中添加了如下文件的位置:

Hi I´ve been trying to add a third party jquery plugin on my App Angular 7. So far I´ve done: Added in angular.json the location of files like this:

"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中:

In my 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?

But nothing happens on my page. How can I add the plugin jquery ?

推荐答案

我读了许多有关jquery类型的文章后，就这样解决了这个问题:

Hi after I read a many articles about jquery types I solved this issue like this:

1. 首先，您需要安装jquery/types:npm install --save @ types/jquery
2. 在目录nodes_modules/@ types内部，我创建了一个文件夹"easyticker"(插件名称)
3. 在目录"easyticker"中创建了文件:index.d.ts，放在其中:

声明模块"easyTicker"

declare module 'easyTicker'

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

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

1. 在我的组件上，我导入了jquery:

从'jquery'导入*作为jQuery

import * as jQuery from 'jquery'

1. 然后我给插件打电话:

ngAfterViewInit(){

ngAfterViewInit() {

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

这篇关于如何在angular 7上添加第三方插件jquery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！