Angular(2+):当初始化所有子组件时,如何从父组件中知道?

时间:2018-03-14 09:37:44

标签: angular children lifecycle-hook

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

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

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

3 个答案:

答案 0 :(得分:0)

您可以使用装饰器。我的意思是,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
};

答案 1 :(得分:0)

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

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

我创建了一个堆栈闪电战,其中按顺序在应用程序组件(父级)中使用了3个组件:

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

因此AppComponent OnInit挂钩将首先触发,然后是HelloComponent OnInit,最后是ChildComponent。

在控制台上查看它:https://stackblitz.com/edit/angular-62xjux

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

  

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

     

在ngAfterViewInit和之后的所有内容中调用   ngAfterContentChecked()。

答案 2 :(得分:0)

如何使用服务。最后一个child通过observable发布事件,parent订阅。