ngAfterViewInit() 和 ngAfterViewChecked() 有啥区别？

Posted 2023-03-13

【中文标题】ngAfterViewInit() 和 ngAfterViewChecked() 有啥区别？

【英文标题】：What is the difference between ngAfterViewInit() and ngAfterViewChecked()?ngAfterViewInit() 和 ngAfterViewChecked() 有什么区别？

【发布时间】：2018-02-20 01:56:41

【问题描述】：

我正在学习 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 Vs ngAfterContentChecked、ngAfterViewInit Vs ngAfterViewChecked 之间的区别。

他们提到组件内容已被检查和组件视图已被检查。我不明白“检查”这个词提到了什么？

谁能解释一下。

【问题讨论】：

您可能永远不需要使用这些。我已经编写了几个大型 Angular 应用程序，但从来没有。在许多情况下，如果您认为自己需要它们，那是因为您的设计存在问题。我会继续做更重要的事情，除非你除了学习奥术之外别无他法。如果您确实认为，无论出于何种原因，您需要使用它们或想了解它们，那么只需阅读文档即可。其他人都是这样做的。

my answer还有什么不清楚的地方吗？

@AngularInDepth.com 你的答案看起来很清楚。以后有什么疑问可以问你吗？

@Kallis，是的，当然，如果有帮助，请考虑接受它

newbedev.com/…

【参考方案1】：

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

ngAfterViewInit 与 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）而不是组件模板中指定的子项运行更改检测。

我不明白“检查”这个词提到了什么？

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

【参考方案2】：

您可以参考docs，其中明确说明了这些：

ngAfterContentInit()

在 Angular 将外部内容投射到组件的视图后响应。 在第一个 ngDoCheck() 之后调用一次。

ngAfterContentChecked()

在 Angular 检查投射到组件中的内容后做出响应。 在 ngAfterContentInit() 和每个后续的 ngDoCheck() 之后调用。

ngAfterViewInit()

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

ngAfterViewChecked()

在 Angular 检查组件的视图和子视图后做出响应。 在 ngAfterViewInit 和每个后续的 ngAfterContentChecked() 之后调用。

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

【讨论】：

在这里重复这些信息有什么意义？

答案终于指出了，但它对未来的访问者有帮助。所以，把它全部放好。

但是未来的访问者已经有一个地方可以找到它，这是官方文档，它将保持最新，与此答案不同。

@user663031 我知道在哪里可以找到文档。我来 SO 是为了 TL;DR。

【参考方案3】：

ngDoCheck：每次触发更改检测的任何事件（例如点击处理程序、HTTP 请求、路由更改等）都会触发此事件。这个生命周期钩子主要用于调试目的；

ngAfterContentInit：在外部内容投射到组件后调用。记住像 @ContentChildren 和 @ContentChild 这样的内容查询是在调用钩子回调之前设置的；

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

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

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