Angular 5 - 指令中的生命周期挂钩

问题描述 投票:0回答:3

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

我正在尝试起诉

ngAfterViewInit
来检测是否所有值都绑定到该属性,然后调用jQuery插件。

但是我找到了仅适用于组件的生命周期挂钩。我可以在指令中使用它们吗?这是一个好的选择吗?

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

如果我不使用

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

javascript jquery directive angular5
3个回答
10
投票

但是我找到了仅适用于组件的生命周期挂钩。我可以在指令中使用它们吗?这是一个好的选择吗?

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

(形成文档:)

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

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

有一个在指令上使用熟悉的钩子的示例这里


2
投票

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

  • ngOnInit
  • ngAfterContentCheckted
  • ngOnDestroy

文档


0
投票

指令中提供了所有生命周期方法。

stackblitz 链接

© www.soinside.com 2019 - 2024. All rights reserved.