angular - Angular（2+）：我如何从父组件知道所有子组件何时初始化？

Question

是否存在所谓的“ngAfterAllChildrenInit”生命周期钩子，因为 ngAfterViewInit 在孩子的 ngOninit 之前被调用，

我试图避免使用 setTimeOut 进行黑客攻击或从所有孩子那里发出事件并收集它们，然后做我想做的事情（这取决于孩子们的初始化）

它似乎很常见，为什么它不是角度的一部分？

score 0 · Accepted Answer

0

如何使用服务。最后一个子节点通过 observable 发布事件，父节点订阅它。

于 2021-02-02T04:20:44.690 回答

score 0 · Accepted Answer

你可以为此使用装饰器。我的意思是，Angular 装饰器，而不是自定义装饰器。

在你的父母：

activated: any = {};

在您的孩子中：

constructor(@Host() parent: ParentComponent) {}

// Hook of your choice
ngOnInit() { this.parent.activated[this.constructor.name] = true; }

这将创建一个activated像这样的对象

activated = {
  FirstChildComponent: true
  // Second not initialized ? Then not here and activated[SecondChildComponent] = undefined
};

score 0 · Accepted Answer

Angular Lifecycle 钩子非常强大，为了实现你想要的，你可以简单地使用 OnInit 生命周期钩子。Angular 正在读取您的模板文件并以垂直方式（从上到下）运行您的组件。因此，您只需在最后一个组件的 ngOnInit 方法中做任何您想做的事情。

如果您的组件用于应用程序的不同部分，您可以使用 @Host 装饰器检查父组件是否是您想要的（请参阅@trichetriche 的答案）。

我创建了一个堆栈闪电战，其中应用程序组件（父级）中按以下顺序使用了 3 个组件：

<hello name="{{ name }}"></hello>
<app-child></app-child>

所以 AppComponent OnInit 钩子将首先触发，然后是 HelloComponent OnInit，最后是 ChildComponent。

编辑：您可以使用ngAfterViewChecked文档指定的：

在 Angular 检查组件的视图和子视图/指令所在的视图后做出响应。

在 ngAfterViewInit 和每个后续的 ngAfterContentChecked() 之后调用。

3 回答 3