Question

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

我想注意何时所有子组件视图都完全呈现。我尝试了所有生命周期挂钩，例如

ngAfterContentChecked

和

ngOnChanges

但没有一个被调用。可以识别渲染吗？

编辑：

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

我的组件如下：

父视图：

<video-id>/comments?live_filter=no_filter&order=reverse_chronological&filter=stream

儿童1视图：

<child-1></child-1>

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()。

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

1 个答案: