Angular 5 - 指令

时间:2018-02-11 18:09:49

标签: javascript jquery directive angular5

我是Angular 5的新手。
我已经为外部JS库创建了指令 但是在同一个指令中,我将值绑定到属性。

我试图起诉ngAfterViewInit以检测是否所有值都绑定到属性然后调用jQuery插件。

但我发现只有组件的生命周期钩子。我可以在指令中使用那些吗?这是一个不错的选择吗?

<div *ngFor="let item of easypiechartOptions"
    [option]="item"
    appEasyPieChart
    [attr.data-percent]="item.percent">
</div>

如果我不使用ngAfterViewInit,那么当我调用jQuery插件时,值不受约束。
如果我使用它,当我调用jQuery插件时,属性值就准备好了。

2 个答案:

答案 0 :(得分:2)

  

但我发现只有组件的生命周期钩子。我可以在指令中使用那些吗?这是一个不错的选择吗?

我们用于组件的钩子似乎也适用于指令。 我们可以从文档here中理解这个概念。

(形成文档:)

  

指令具有相同的生命周期挂钩,减去特定于组件内容和视图的挂钩

     

指令和组件实例具有生命周期,因为Angular会创建,更新和销毁它们。开发人员可以通过在Angular核心中实现一个或多个生命周期钩子接口来利用该生命周期中的关键时刻文库

有一个在指令here

上使用熟悉的钩子的例子

答案 1 :(得分:0)

为 Ofig 的回答做出了贡献,指令生命周期挂钩。将是:

  • ngOnInit
  • ngAfterContentCheckted
  • ngOnDestroy

Docs