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