angular - 注意何时渲染 Angular 分量及其子级

我有一个 Angular 分量，其中有另一个分量，也有另一个分量。因此，组件是嵌套的。

我想注意到所有子组件 View 均已完全呈现。
我尝试了所有生命周期 Hook



和



但他们都没有被召集。是否可以识别渲染？

编辑:

我的观点将动态改变。因此，我需要不仅在开始时就知道这一点。

我的组件看起来像:

父 View :

<child-1></child-1>

child 1 View :

<child-2><child-2>

最佳答案

您可以确定，当调用了最深层的最后一个子组件中的ngAfterViewInit时，所有祖先也将被渲染。

这基本上意味着，如果您具有这样的结构:

<parent>
  <child-1>
    <child-2></child-2>
    <child-3></child-3>
  </child-1>
</parent>

您可以确定，当child-3调用ngAfterViewInit时，树中的所有内容都将呈现:

@Component({
  selector: 'child-3'
})
export class Child3Component implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log('all done here');
  }
}

如果您想知道何时通过树处理更新，以及在一个周期后更新模板，则需要使用ngAfterViewChecked Hook 。有趣的是，这是相反的方法。因此，您只需要监听最父节点即可找出完成检查的时间。

注意同一棵树:

@Component({
  selector: 'parent'
})
export class ParentComponent implements AfterViewChecked {
  ngAfterViewChecked(): void {
    console.log('all done here');
  }
}

另一方面，如果您想知道事件触发后， View 是否已更新，也可以只使用更改检测器，applicationRef或setTimeout:

如果这部分代码在您的组件内部

(不应该!不要在组件内部直接使用http!)

this.http.get(url).subscribe((data) => {
  this.data = data;

  // method 1:
  setTimeout(() => {
    // view is rendered here
  });


  // method 2:
  this.changeDetectorRef.detectChanges();
  // view is rendered here


  // method 3:
  this.applicationRef.tick();
  // view is rendered here
});

但是请注意，如果您的组件(或任何父组件)的changeDetection设置为OnPush，则必须首先使用以下任何方法设置:this.changeDetectorRef.markForCheck()。