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

有关详细解释生命周期钩子的最佳文章是关于Angular中的变化检测需要了解的所有内容.

ngAfterViewInit Vs ngAfterVIewChecked

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

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

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

同样适用于ngAfterContentInitAngular运行更改检测投影内容(直通ng-content)而不是组件模板中指定的子项的情况.

我不明白"Checked"这个词提到了什么？

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

Answer 2

您可以参考明确说明这些内容的文档:

ngAfterContentInit()

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

ngAfterContentChecked()

在Angular检查投影到组件中的内容后进行响应.在ngAfterContentInit()和随后的每个ngDoCheck()之后调用.

ngAfterViewInit()

在Angular初始化组件的视图和子视图后响应.在第一次ngAfterContentChecked()之后调用一次.

ngAfterViewChecked()

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

这意味着Checked说它会追逐Init.初始化意味着它首先运行,初始化后检查更改会多次运行.