angular强制更新ui视图的实现方法

更新时间：2023年03月04日 13:37:08 作者：前端开发者--小明

这篇文章主要介绍了angular强制更新ui视图的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

angular 强制更新ui视图方法

强制更新ui视图方法主要用在数据已经改变，但是ui展示视图不跟新情况

1 主要使用方法类 ChangeDetectorRef

Angular 各种视图的基础类，提供变更检测功能。

变更检测树会收集要检查的所有视图。

使用这些方法从树中添加或移除视图、初始化变更检测并显式地把这些视图标记为脏的，意思是它们变了、需要重新渲染。

1.1类方法一：markForCheck()

当输入已更改或视图中发生了事件时，组件通常会标记为脏的（需要重新渲染）。调用此方法会确保即使那些触发器没有被触发，也仍然检查该组件。

1.2类方法一：detach()

从变更检测树中分离开视图。已分离的视图在重新附加上去之前不会被检查。与 detectChanges() 结合使用，可以实现局部变更检测。

即使已分离的视图已标记为脏的，它们在重新附加上去之前也不会被检查。

1.3类方法一：detectChanges()

检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。

1.4类方法一：checkNoChanges()

检查变更检测器及其子检测器，如果检测到任何更改，则抛出异常。

1.5类方法一：reattach()

把以前分离开的视图重新附加到变更检测树上。视图会被默认附加到这棵树上。引入 ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

2 赋值引入

constructor(private ref: ChangeDetectorRef) { }

3方法中调用

    this.ref.markForCheck();    // 就是在拿到数据后，执行这两行代码，这是关键
    this.ref.detectChanges();

angular踩坑数据发生改变，视图未更新

大多数情况下，页面的视图会随着数据的改变而改变，少数情况下，数据变了，而视图不更新。

左侧的视图，右侧数据，数据改变时，视图未更新。。。。具体原因呢，可能是angular 脏检查没有检测到数据更新吧。。。

解决方案

引入 ChangeDetectorRef ,使视图强刷。

import { Component, OnInit, Input, ChangeDetectorRef} from '@angular/core';

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Angular中通过$location获取地址栏的参数
这篇文章主要介绍了详解 Angular中通过$location获取地址栏的参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
AngularJS学习笔记之依赖注入详解
下面小编就为大家带来一篇AngularJS学习笔记之依赖注入详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
AngularJS ng-repeat遍历输出的用法
本篇文章主要介绍了AngularJS ng-repeat遍历输出的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Angular2的管道Pipe的使用方法
本篇文章主要介绍了Angular 2的管道Pipe的使用方法，详细的介绍了管道的定义和使用方法，具有一定的参考价值，有兴趣的可以了解一下
2017-11-11
利用Angularjs和bootstrap实现购物车功能
在学习了如何简单开始一个Angular程序之后，跟着网上的教程我也来实现一个购物车功能，为了减少页面样式设计我使用了bootstrap来偷懒，现在分享给大家，有需要的可以参考借鉴。
2016-08-08
关于使用axios的一些心得技巧分享
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，所以下面这篇文章主要给大家分享了关于使用axios的一些心得技巧，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
angularJs select绑定的model取不到值的解决方法
今天小编就为大家分享一篇angularJs select绑定的model取不到值的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
Angular2监听页面大小变化的解决方法
这篇文章主要介绍了Angular2监听页面大小变化的解决方法,需要的朋友可以参考下
2017-10-10
Angular应用Bootstrap过程步骤逻辑详解
这篇文章主要为大家介绍了Angular应用Bootstrap过程步骤逻辑详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
AngularJS自定义表单验证功能实例详解
这篇文章主要介绍了AngularJS自定义表单验证功能,结合完整实例形式详细分析了AngularJS实现表单验证的相关指令、模型绑定、数据验证等操作技巧,需要的朋友可以参考下
2018-08-08