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

我有一个布局组件，它有一个

，其中子组件由路由器动态插入

当插入子元素并完成其视图的构建时，我如何知道

---

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

您可以使用

@ViewChild

绑定绑定到

组件

对于使用

的任何组件，添加以下内容：

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

const activated = false;

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

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

---

路由器通过

路由器出口

上的

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

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

此时，组件的视图被创建并附加到DOM。但是，仅执行附加组件的
构造函数
。还没有生命周期挂钩。在下一次变更检测期间，将调用所连接组件的生命周期挂钩

您可以通过
（激活）
输出订阅此事件，如yurzui所示：

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

因此，例如，如果您想知道子组件何时调用了
ngOnInit
，可以执行以下操作：

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

const activated = false;

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

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

您是否在子组件中选中了ngafterviewinit？您所说的“选中”是什么意思？我怎么知道它是否是从父组件调用的？
我的意思是，我已经看过ngafterviewinit topicThanks了！我已经习惯了这种方法。它对我的用例非常有效。我更喜欢使用
@ViewChild
，而不是使用
（激活）
绑定。@slavafomini谢谢！我认为这是一个合理的解决办法。但是，我决定使用
@ViewChild
方法，因为它允许隔离单个函数内部的功能，而无需向模板中添加额外的代码。@slavafomini，如果您只是通过ThinkingMedia使用该方法，则在
activateEvents.subscribe（（）=>{//传递新的子组件实例
。但我的解决方案会这样做。实际上，如何订阅激活的事件并不重要，重要的是这个逻辑
ngAfterViewInit（）{if（this.activated）{
。我认为Angular不鼓励直接订阅事件发射器。事实上，我正在使用这个解决方案，它基于ThinkingMedia的答案，效果非常好：