Question

我正在学习Angular 2.在angular 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 Vs 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之后运行。初始化意味着它首先运行，并且在初始化后检查更改会多次运行。

Answer 3

ngDoCheck ：每次触发可触发更改检测的任何操作（例如，点击处理程序，HTTP请求，路由更改等）时，都会触发此操作。该生命周期挂钩主要用于调试目的；

ngAfterContentInit ：在将外部内容投影到组件中之后调用。请记住，在调用挂钩回调之前设置了诸如@ContentChildren和@ContentChild之类的内容查询；

ngAfterContentChecked ：在每次检查组件内容之后调用；

ngAfterViewInit ：在初始化组件的视图之后调用。非常适合初始化事件第三方库，它需要在执行任何操作之前先组成视图（请注意，视图与内容有所不同，因为组件视图是非投影模板）；

ngAfterViewChecked ：在每次检查组件视图后调用；

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

3 个答案: