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

问题描述

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

脚本":["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 中:

声明 var $: any;接口 JQuery { easyTicker(options?: any):查询；}

尝试执行:

 ngAfterViewInit() {$('.ultimasExecucoes').easyTicker({可见:1，间隔:4000});}

在我的模板中

<ul><li *ngFor="let workFlow of execucoesEncerradas">{{workFlow.nomeWorkFlow}} - 数据输入:{{workFlow.dataInicioWf |日期:'dd/MM/yyyy HH:mm:ss'}}- 数据加密:{{workFlow.dataEncerramentoWf |日期:'dd/MM/yyyy HH:mm:ss'}}- 结果:{{workFlow.resultadoExecucao}}

但我的页面上没有任何反应.如何添加插件 jquery ?

解决方案

在我阅读了很多关于 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>$)( 文档 ).ready(function() {(<any>$)('#ultimasExecucoes').easyTicker({可见:1，间隔:8000});});}

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"
 ]

In my AppComponent:

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

Try to execute:

 ngAfterViewInit() {

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

In my template

<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>

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

解决方案

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

1. First you need to install jquery/types: npm install --save @types/jquery
2. Inside directory nodes_modules/@types I created a folder "easyticker"(name of plugin)
3. Into directory "easyticker" I created file: index.d.ts inside I put this:

declare module 'easyTicker'

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

4. On my Component I imported jquery:

import * as jQuery from 'jquery'

5. Then I called my plugin:

ngAfterViewInit() {

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

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