注意 angular 组件及其子组件何时被渲染

Question

我有一个 angular 组件，该组件有另一个组件，该组件也有另一个组件。因此，组件是嵌套的。

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

ngAfterContentChecked

和

ngOnChanges

但是其中 none 个被调用了。是否可以识别渲染？

编辑：

我的视图将动态更改。所以，我不能一开始就知道这个。

我的组件看起来像：

父视图：

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

注意 angular 组件及其子组件何时被渲染

Notice when angular component and its children are rendered

angular2-template

angular