angular4数据改变，页面没有渲染解决方法

最新推荐文章于 2022-08-24 15:19:34 发布

csdn277

最新推荐文章于 2022-08-24 15:19:34 发布

阅读量1w

点赞数

分类专栏：学习记录文章标签： angular4 页面渲染 ChangeDetectorRef

学习记录专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨Angular中的变更检测机制，包括ChangeDetectorRef的各种方法如markForCheck(), detach(), detectChanges(), checkNoChanges(), reattach()的使用场景和原理。通过这些方法，开发者可以更精细地控制视图更新，优化性能。

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

代码块中ts数据进行了更新，view视图保持不变
可以引入angular4的 ChangeDetectorRef

//页面引入所需模块
import { ChangeDetectorRef } from '@angular/core';

//注入服务
constructor(public changeDetectorRef:ChangeDetectorRef ) {

该方法有以下几种方法：

class ChangeDetectorRef {
markForCheck(): void
detach(): void
detectChanges(): void
checkNoChanges(): void
reattach(): void
}`

markForCheck()方法有时候在angular的zone之后。会不生效
detectChanges()
检查一遍变化检测器 (change detector) 和它的子检测器。可以配合 ChangeDetectorRef 来实现局部变化检查。有些時候，对于更新频繁数据量又很大的列表，我们不想 angular 在列表变化的时候马上更新视图，我们可以手动去调用 detectChanges 方法，去强制 angular 检查组件数据的变化。这样一来，就可以实现自主控制视图更新频率，而不用担心有太大的性能问题了。
checkNoChanges()
检测该组件及其子组件，如果有变化存在则报错，用于开发阶段二次验证变化已经完成。
detach()
从变化检测树中分离变化检测器，该组件的变化检测器将不再执行变化检测，除非手动调用 reattach() 方法。当我们在组件上调用 ChangeDetectorRef 的 detach 方法之后，angular 在该组件数据发生变化的时候，不再执行更新视图等操作。
reattach()
重新添加已分离的变化检测器，使得该组件及其子组件都能执行变化检测。让 angular 在组件数据发生变化的时候重新检测该组件的变化，在该组件数据变化的时候，执行如更新视图的操作。

举例：
if (value) {
this.ChangeDetectorRef.reattach();
} else {
this.ChangeDetectorRef.detach();
}
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();

转：https://blog.youkuaiyun.com/fish_dw/article/details/81019214