在Angular 2应用程序中使用jQuery插件

如何将jQuery插件与Angular 2应用程序结合使用

例如：环形（）

我只知道我必须将jQuery和plugin.js导入我的

index.html

，但是如何放置这样的代码（如插件文档所示）：

$（文档）.ready（函数（）{
$（“#你的圈子”）。旋转({
动画步骤：5，
前地面边界宽度：5，
背景边框宽度：15，
百分比：75
});
});

---

进入一个角度2应用程序-我不知道

运行jquery需要同时使用javascript文件和定义文件。要添加javascript文件，只需将它们放在index.html中。添加定义文件不是必需的，但这是一个好主意，因为在TS域中，您可以自动完成并检查jquery方法。如果你想使用定义文件（d.ts），你需要安装，使用npm、tsd和tsd来安装jquery.d.ts文件。

你最好不要使用jquery，也不要像这样使用指令，但是可以编写一个使用jquery插件的指令

在Angular中有三种指令，但是您需要像下面的代码一样使用它们来嵌入这个库

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[circliful]'
})
export class CirclifulDirective {
   constructor(private el: ElementRef) { 
       $(el).circliful({
           animationStep: 5,
           foregroundBorderWidth: 5,
           backgroundBorderWidth: 15,
           percent: 75
       });
   }
}

---

然后你可以使用这个指令。

这与询问如何在法拉利车上安装T型化油器基本相同。这不是答案，但如果有人会寻求解决方案，这是一篇很好的文章：这里没有关于jquery库的内容。我认为更好的方法是将此脚本放在组件初始化上。请注意，ElementRef在*ngIf中为模板中的DOM元素返回undefined。改为使用[隐藏]

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[circliful]'
})
export class CirclifulDirective {
   constructor(private el: ElementRef) { 
       $(el).circliful({
           animationStep: 5,
           foregroundBorderWidth: 5,
           backgroundBorderWidth: 15,
           percent: 75
       });
   }
}