angular強制更新ui視圖如何實現

本文小編為大家詳細介紹“angular強制更新ui視圖如何實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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強制更新ui視圖如何實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。