相關(guān)教程推薦：《angular教程》

問題現(xiàn)象

在開發(fā)過程中，遇到前臺頁面數(shù)據(jù)不更新的問題。前臺頁面中采用了插值表達式綁定后臺數(shù)據(jù)字段，在后臺調(diào)用接口成功后會修改數(shù)據(jù)字段，但此時前臺頁面沒有自動更新。如下文代碼所示，就是很基礎(chǔ)的插值表達式的使用，并無特別之處。

<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
        }
      });

---

問題原因

這個問題涉及到Angular的一個特性——變化檢測（Change Detection）。所用的框架是ABP框架，框架自動生成的頁面中，添加了changeDetection這條屬性。這條屬性指明了當(dāng)前組件的變化檢測策略是OnPush。

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [appModuleAnimation()],
  changeDetection:ChangeDetectionStrategy.OnPush
})

關(guān)于變化檢測策略，有兩種：

Default：Default策略是默認(rèn)策略，只要有值發(fā)生變化，就對組件及其子孫組件進行檢查。

OnPush：OnPush策略是只有當(dāng)輸入數(shù)據(jù)（@Input）的引用發(fā)生變化或者有事件觸發(fā)時，組件才進行變化檢測。這種策略檢查不徹底，但效率高。

---

解放方案方案一，直接刪掉這條屬性賦值方案二，手動進行變化檢測

方案一很簡單，就是直接刪掉組件中這條變化檢測策略的賦值語句。這樣組件將采用默認(rèn)策略，缺點就是效率變低了。

方案二就是在調(diào)用接口成功后，手動調(diào)用變化檢測機制的觸發(fā)函數(shù)。這里要用到變化檢測對象。
首先引入變化檢測的模塊

import { ChangeDetectorRef } from “angular”;

然后聲明變化檢測對象

constructor(private changeDetection:ChangeDetectorRef) {}

在接口調(diào)用成功后調(diào)用變化檢測方法

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
          this.changeDetection.detectChanges();
        }
      });

有點手動調(diào)用C#的垃圾回收機制的味道。

參考資料：

https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010928087

https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Flskzj%2Fp%2F11143233.html

更多編程相關(guān)知識，請訪問：編程教學(xué)！！

總結(jié)

以上是生活随笔為你收集整理的了解Angular中的变化检测（Change Detection）机制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。