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

Question

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

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

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

Answer 1

您可以使用 @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
    }
}

Answer 2

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

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

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

您可以通过 yurzui 显示的 (activate) 输出订阅此事件：

<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
   }
}

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

How do I know when child element has finished rendering in Angular?

angular-routing

angular