Question

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

我如何知道，插入子元素并完成构建它的视图？

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

Answer 1

路由器在activateWith上调用router-outlet方法创建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

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

对于使用<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
    }
}

我怎么知道子元素何时在Angular中完成渲染？

2 个答案: