注意何时渲染角度分量及其子级

Question

我有一个角度组件，它又有另一个组件。因此，组件是嵌套的。

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

ngAfterContentChecked

和

ngOnChanges

但没有一个人被召集。是否可以识别渲染？

编辑：

我的视图将动态更改。因此，我不仅要在一开始就知道这一点。

我的组件看起来像：

父视图：

<child-1></child-1>

儿童1视图：

<child-2><child-2>

Answer 1

您可以确定，当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钩子。有趣的事实是，这是相反的。所以你只需要监听最父节点就可以知道它什么时候完成检查。

考虑到同一棵树：

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

另一方面，如果你想知道一个事件被触发后，视图是否被更新，你也可以使用更改检测器，或者 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()使用任何方法设置：。