如何知道子元素何时在 Angular 中完成渲染?

Question

我有一个布局组件，该组件具有路由器动态插入子组件的<router-outlet>。

我怎么知道，当插入子元素并完成其视图的构造时？

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

Answer 1

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

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

此时，将创建组件的视图并将其附加到 DOM。但是，仅执行附加组件的constructor。还没有生命周期钩子。在下一次更改检测期间，将调用附加组件的生命周期挂钩。

您可以通过(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
}
}

Answer 2

您可以使用@ViewChild绑定绑定到<router-outlet>组件。

对于使用<router-outlet>的任何组件，请添加以下内容：

/**
* Gain access to the inner route child.
*/
@ViewChild(RouterOutlet)
public outlet: RouterOutlet;

然后，您可以侦听如下更改：

public ngAfterViewInit(): void {
this.outlet.activateEvents.subscribe((component) => {
// gets passed the new child component instance
});
this.outlet.deactivateEvents.subscribe(() => {
// the child component has been destroyed
});
if (this.outlet.isActivated) {
// will be false if there is no child route active
}
}