Question

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

例如：circliful（https://github.com/pguso/jquery-plugin-circliful）。

我所知道的是，我必须将jQuery和插件.js导入到我的index.html中，但是如何放置这样的代码（如插件文档中所示）：

<script>
$( document ).ready(function() {
        $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: 75
    });
    });
</script>

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

Answer 1

顺便说一句，你最好不要使用jquery并使用像circle progress bar这样的指令，但可以编写一个使用jquery插件的指令。

There是Angular中的三种指令，但您需要使用Attribute directives来嵌入此库，如下面的代码

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
       });
   }
}

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

Answer 2

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

使用带有Angular 2应用程序的jQuery插件

2 个答案: