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

发布时间：2020-12-17 17:07:12 所属栏目：安全来源：网络整理

导读：我如何使用Angular 2应用程序的jQuery插件？例如：circliful(https://github.com/pguso/jquery-plugin-circliful). 我所知道的是我必须将jQuery和插件.js导入到我的index.html中,但是如何放置这样的代码(如插件文档所示)： script$( document ).ready(funct

我如何使用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,percent: 75
       });
   }
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!