angular - 我如何知道子元素何时在 Angular 中完成渲染？

Question

我有一个布局组件，它有一个 <router-outlet>其中子组件由路由器动态插入。

我怎么知道，何时插入子元素并完成构建它的 View ？

此外，我无法手动从子组件触发事件，因为我希望此解决方案是通用的。

Answer 1

路由器调用 router-outlet 上的 activateWith 方法创建一个 componentRef 并将其附加到 router-outlet容器。然后它发出 activate 事件:

this.activateEvents.emit(this.activated.instance);

此时，组件的 View 已创建并附加到 DOM。但是，仅执行附加组件的构造函数。还没有生命周期钩子(Hook)。在下一次更改检测期间，将调用附加组件的生命周期 Hook 。

您可以通过 (activate) 输出订阅此事件，如 yurzui 所示:

<router-outlet (activate)="onActivated($event)"></router-outlet>

或使用不推荐的事件发射器:

this.outlet.activateEvents.subscribe((component) => {
      this.activated = true; 
});

因此，例如，如果您想知道何时为子组件调用了 ngOnInit，您可以这样做:

const activated = false;

onActivated() {
   this.activated = true; 
});

ngAfterViewInit() {
   if (this.activated) {
     // lifecycle hooks for the child component have been called
   }
}