Angular 5 - 包含 jquery 插件

Question

我是 angular 的新手，目前使用的是版本 5。我必须安装一个名为 'jquery-circle-progress' 的插件，可以在此处找到： http://kottenator.github.io/jquery-circle-progress/

我已经通过 npm 安装了它，并将 .js 文件添加到 .angular-cli.json 脚本数组。它似乎加载正常，我可以通过浏览器控制台使用 jquery 激活它，所以这部分没问题。

我只是不知道如何从组件内部运行它。我必须每分钟左右更新一次这个进度条，所以我想在 mycomponent.component.ts 中创建一个函数，它获取一些数据，检查它，然后运行s一些 jquery 来更新进度条。

我只是无法在此处使用此进度条的功能。它只是说“.circleProgress 不可用”。

顺便说一句，我可以通过以下方式在 .ts 文件中获取 jquery 到运行：

import * as $ from 'jquery';

我不知道如何在这里也得到圆形进度条。

非常欢迎任何帮助。

Answer 1

您需要在 angular.json（以前是 angular-cli.json）文件中的脚本数组中导入插件代码：

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

正如您在上面看到的，您还可以在其中导入 jQuery - 第一个节点模块。接下来是我必须在我的项目中使用的 jQuery 插件。

然后创建一个新的 Angular 包装器组件，它将包含 jQuery 插件并在 ngOnInit() 方法中对其进行初始化，并最终在 ngOnDestroy() 方法中进行清理。在你的组件的顶部放下这个 declare var $:any; 您不必使用 import * as $ from 'jquery';，因为 jQuery 已在 angular.json 文件中导入到您的应用中。

Angular 5 - 包含 jquery 插件

Angular 5 - include jquery plugin

import

jquery

angular-cli

angular

angular5