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ù)情況下，頁(yè)面的視圖會(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)文章
詳解Angular中通過$location獲取地址欄的參數(shù)
這篇文章主要介紹了詳解 Angular中通過$location獲取地址欄的參數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家?guī)硪黄狝ngularJS學(xué)習(xí)筆記之依賴注入詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
本篇文章主要介紹了AngularJS ng-repeat遍歷輸出的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細(xì)的介紹了管道的定義和使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-11-11
利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車功能
在學(xué)習(xí)了如何簡(jiǎn)單開始一個(gè)Angular程序之后，跟著網(wǎng)上的教程我也來實(shí)現(xiàn)一個(gè)購(gòu)物車功能，為了減少頁(yè)面樣式設(shè)計(jì)我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-08-08
vue更新到2.0之后，作者就宣告不再對(duì)vue-resource更新，而是推薦的axios，所以下面這篇文章主要給大家分享了關(guān)于使用axios的一些心得技巧，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular2監(jiān)聽頁(yè)面大小變化的解決方法
這篇文章主要介紹了Angular2監(jiān)聽頁(yè)面大小變化的解決方法,需要的朋友可以參考下2017-10-10
Angular應(yīng)用Bootstrap過程步驟邏輯詳解
這篇文章主要為大家介紹了Angular應(yīng)用Bootstrap過程步驟邏輯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下2018-08-08