Question

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

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

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

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

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

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

1 个答案: