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

2023年9月13日 216次阅读

我如何使用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应用程序 – 我不知道！

最佳答案 最好不要使用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
       });
   }
}

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

点赞