如何在角4中使用自定义jquery插件

Question

我正在尝试在Angular 4项目中使用名为imgViewer2（https://github.com/waynegm/imgViewer2）的jquery插件。

我安装了npm包并成功导入jquery并使用得很好。 但是当我尝试使用 $（element）.imgViewer2（）; typescript时说找不到该函数。我无法正确导入插件。

导入和使用此插件的方法是什么？

非常感谢。

compile error when added code snippet

解决

很可能是Avaid的第一个建议，

在angular-cli.json中添加了jquery及其插件参考脚本数组。

...
scripts: [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/imgViewer2/imgViewer2.min.js"
],
...

然后只需将以下行添加到.ts文件中即可使用jQuery。

declare var $: JQuery;

现在$附带了插件添加的功能和属性。我不知道是否有更好的方法可以做到这一点但是要知道这对我来说是无痛的。感谢。

Answer 1

这是因为jquery的类型不包含对imgViewer2的任何引用，您可以通过包含这一位来修补组件源中的内容：

declare var $: JQuery;

declare global {
  interface JQuery {
    (selector: string): JQuery;
    imgViewer2(): JQuery;
  }
}

这会让打字稿知道可以调用imgViewer2()作为类型为JQuery的对象的方法（我假设你已经定义了，因为你已经说过你正在使用jquery你的应用程序）

将此代码添加到您要在全局级别调用imgViewer2的同一文件中。

修改

要完成此答案，为了在应用程序中正确使用jquery，请将其添加到文件scripts内的.angular-cli.json数组中：

scripts: [
  "../node_modules/jquery/dist/jquery.min.js"
]

然后在组件中使用上面的声明，这是一个示例骨架组件：

import { Component } from '@angular/core';

declare var $: JQuery;

declare global {
  interface JQuery {
    (selector: string): JQuery;
    imgViewer2(): JQuery;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log($);
    $('div#myDiv').imgViewer2();
  }
}

编辑2

或者，如果您安装jquery typings npm i --save-dev @types/jquery，那么您可以使用更强类型的策略：

import { Component } from '@angular/core';
import 'jquery';

declare global {
  interface JQuery {
    imgViewer2(): JQuery;
  }
}

请注意，您现在必须import 'jquery'，您没有declare var $...，并且您不必重复呼叫签名，因为它已在typings库中为您定义

Answer 2

<强>解决

在angular-cli.json中添加了jquery及其插件参考脚本数组。

...
scripts: [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/imgViewer2/imgViewer2.min.js"
],
...

然后只需将以下行添加到.ts文件中即可使用jQuery。

declare var $: JQuery;

现在$附带了插件添加的功能和属性。 我不知道是否有更好的方法可以做到这一点但是要知道这对我来说是无痛的。感谢。