angular強(qiáng)制更新ui視圖的實(shí)現(xiàn)方法
angular 強(qiáng)制更新ui視圖方法
強(qiáng)制更新ui視圖方法主要用在數(shù)據(jù)已經(jīng)改變,但是ui展示視圖不跟新情況
1 主要使用方法類 ChangeDetectorRef
Angular 各種視圖的基礎(chǔ)類,提供變更檢測(cè)功能。
變更檢測(cè)樹會(huì)收集要檢查的所有視圖。
使用這些方法從樹中添加或移除視圖、初始化變更檢測(cè)并顯式地把這些視圖標(biāo)記為臟的,意思是它們變了、需要重新渲染。
1.1類方法一:markForCheck()
當(dāng)輸入已更改或視圖中發(fā)生了事件時(shí),組件通常會(huì)標(biāo)記為臟的(需要重新渲染)。調(diào)用此方法會(huì)確保即使那些觸發(fā)器沒有被觸發(fā),也仍然檢查該組件。
1.2類方法一:detach()
從變更檢測(cè)樹中分離開視圖。 已分離的視圖在重新附加上去之前不會(huì)被檢查。 與 detectChanges() 結(jié)合使用,可以實(shí)現(xiàn)局部變更檢測(cè)。
即使已分離的視圖已標(biāo)記為臟的,它們?cè)谥匦赂郊由先ブ耙膊粫?huì)被檢查。
1.3類方法一:detectChanges()
檢查該視圖及其子視圖。與 detach 結(jié)合使用可以實(shí)現(xiàn)局部變更檢測(cè)。
1.4類方法一:checkNoChanges()
檢查變更檢測(cè)器及其子檢測(cè)器,如果檢測(cè)到任何更改,則拋出異常。
1.5類方法一:reattach()
把以前分離開的視圖重新附加到變更檢測(cè)樹上。 視圖會(huì)被默認(rèn)附加到這棵樹上。引入 ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';
2 賦值引入
constructor(private ref: ChangeDetectorRef) { }
3方法中調(diào)用
? ? this.ref.markForCheck();?? ?// 就是在拿到數(shù)據(jù)后,執(zhí)行這兩行代碼,這是關(guān)鍵 ? ? this.ref.detectChanges();
angular踩坑 數(shù)據(jù)發(fā)生改變,視圖未更新
大多數(shù)情況下,頁面的視圖會(huì)隨著數(shù)據(jù)的改變而改變,少數(shù)情況下,數(shù)據(jù)變了,而視圖不更新。
左側(cè)的視圖,右側(cè)數(shù)據(jù),數(shù)據(jù)改變時(shí),視圖未更新。。。。具體原因呢,可能是angular 臟檢查沒有檢測(cè)到數(shù)據(jù)更新吧。。。
解決方案
引入 ChangeDetectorRef ,使視圖強(qiáng)刷。
import { Component, OnInit, Input, ChangeDetectorRef} from '@angular/core';
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS 實(shí)現(xiàn)JavaScript 動(dòng)畫效果詳解
本文主要介紹AngularJS 實(shí)現(xiàn) JavaScript 動(dòng)畫的資料,這里整理了詳細(xì)的資料和簡(jiǎn)單示例代碼,有興趣的小伙伴可以參考下2016-09-09關(guān)于AngularJS中ng-repeat不更新視圖的解決方法
今天小編就為大家分享一篇關(guān)于AngularJS中ng-repeat不更新視圖的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular通過指令動(dòng)態(tài)添加組件問題
這篇文章主要介紹了Angular通過指令動(dòng)態(tài)添加組件問題,文中通過寫一個(gè)小組件來簡(jiǎn)單總結(jié)下,需要的朋友可以參考下2018-07-07Angular8升級(jí)至Angular13遇到的問題解決
這幾天升級(jí)公司的一個(gè)Angular項(xiàng)目遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于Angular8升級(jí)至Angular13遇到的問題解決,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01AngularJS通過ng-Img-Crop實(shí)現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實(shí)現(xiàn)頭像截取的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Angular項(xiàng)目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目中$scope.$apply()方法使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來看看吧。2017-07-07Angular 4根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建出組件的方法教程
組件是我們?cè)趯W(xué)習(xí)angular中必不可少的一部分,下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建出組件的相關(guān)資料,文中通過圖文與示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-11-11