ngAfterViewInit（）和ngAfterViewChecked（）有什么区别？

Question

我正在学习Angular 2.在角度2生命周期钩子里

ngAfterContentInit -- Component content has been initialized
ngAfterContentChecked -- Component content has been Checked
ngAfterViewInit -- Component views are initialized
ngAfterViewChecked -- Component views have been checked

我无法理解ngAfterContentInit与ngAfterContentChecked，ngAfterViewInit和ngAfterViewChecked之间的区别。

他们提到组件内容已经过检查，并且已经检查了组件视图。我无法理解“Checked”这个词提到了什么？

任何人都可以解释。

Answer 1

有关详细解释生命周期钩子的最佳文章是Everything you need to know about change detection in Angular。

ngAfterViewInit Vs ngAfterVIewChecked

正如文章中所解释的那样，每当Angular完成对组件及其子组件的变更检测时，就会调用ngAfterVIewChecked。 ngAfterViewInit仅在第一次更改检测周期中被调用。如果您需要知道第一个更改检测周期何时运行，则可以使用它。例如，您需要为某些jQuery元素设置侦听器，您需要等到它们被初始化：

ngAfterViewInit() {
  this.widget = $(this.location.nativeElement).slider({value: this.value});

  this.widget.on('slidestop', (event, ui) => {
    this.onChange(ui.value);
  });
}

同样适用于ngAfterContentInit，区别在于Angular运行更改检测投影内容（通过ng-content）而不是组件模板中指定的子项。

我无法理解“Checked”这个词提到了什么？

检查意味着运行更改检测并执行更改检测相关操作，如DOM更新，查询列表更新和子组件绑定更新。

Answer 2

你可以参考docs，它清楚地说明了这些：

ngAfterContentInit（）

在Angular将外部内容投影到组件视图后进行响应。在第一次ngDoCheck（）之后调用一次。

ngAfterContentChecked（）

在Angular检查投影到组件中的内容后响应。在ngAfterContentInit（）和随后的每个ngDoCheck（）之后调用。

ngAfterViewInit（）

在Angular初始化组件的视图和子视图后响应。在第一次ngAfterContentChecked（）之后调用一次。

ngAfterViewChecked（）

在Angular检查组件的视图和子视图后进行响应。在ngAfterViewInit和随后的每个ngAfterContentChecked（）之后调用。

这意味着Checked声称它在Init之后运行。初始化意味着它首先运行，初始化后检查更改会多次运行。