[Angular] AfterContentChecked && AfterViewChecked

最新推荐文章于 2024-01-10 16:58:45 发布

weixin_30780221

最新推荐文章于 2024-01-10 16:58:45 发布

阅读量489

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/10338404.html

本文深入探讨Angular组件的生命周期，特别是AfterContentChecked与AfterViewChecked阶段。详细解释了在这两个阶段中修改数据的限制与可能引发的错误，以及如何正确利用这两个阶段进行DOM操作和焦点管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AfterContentChecked & AfterViewChecked are called after 'OnChanges' lifecycle. And each time 'ngOnChanges' triggered, ngAfterContentChecked and ngAfterViewChecked will also be called. Which means we should be careful what we do in those lifecycle should be light weight, no havey calculation.

AfterContentChecked:

Here is the last chance you can modify the data before it rendered to the DOM. But there is one restriction that you cannot modify the data which passed to the content projection component:

<course-card [course]="course">
    <course-image [image-url]="imageURL"></course-image>
</course-card>

ngAfterContentChecked () {
  this.course.description = 'something new'; // OK
  this.course.imageUrl = "" // error  
}

You cannot modify imageUrl prop since it is used by the content projection.

AfterViewChecked:

After the whole template has been checked, this lifecycle will be called, it means you cannot modify the @Input data any more. Otherwise it will throw error.

Here what you can do is doing some DOM animation, foucs management... because DOM is already renderered to the screen.

转载于:https://www.cnblogs.com/Answer1215/p/10338404.html