了解Angular中的變化偵測（Change Detection）機制

相關教學推薦：《angular教學》

問題現象

在開發過程中，遇到前台頁面資料不更新的問題。前台頁面中採用了插值表達式綁定後台資料字段，在後台呼叫介面成功後會修改資料字段，但此時前台頁面沒有自動更新。如下文程式碼所示，就是很基礎的插值表達式的使用，並無特別之處。

<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這條屬性。這條屬性指明了目前組件的變化偵測策略是OnPush。

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

關於變化偵測策略，有兩種：

• Default：Default策略是預設策略，只要有值發生變化，就對組件及其子孫組件進行檢查。

• OnPush：OnPush策略是只有當輸入資料（@Input）的引用發生變化或有事件觸發時，元件才會進行變化檢測。這種策略檢查不徹底，但效率高。

---

解放方案

• 方案一，直接刪除這條屬性賦值
• 方案二，手動進行變化偵測

方案一很簡單，就是直接刪除元件中這條變化偵測策略的賦值語句。這樣元件會採用預設策略，缺點就是效率變低了。

方案二就是在呼叫介面成功後，手動呼叫變化偵測機制的觸發函數。這裡要用到變化檢測對象。
首先引入變更偵測的模組

import { ChangeDetectorRef } from “angular”;

然後宣告變更偵測物件

constructor(private changeDetection:ChangeDetectorRef) {}

#在介面呼叫成功後呼叫變更偵測方法

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

有點手動呼叫C#的垃圾回收機制的味道。

參考資料：

• https://links.jianshu.com/go?to=https://segmentfault.com/a/1190000010928087

• https://links.jianshu.com/go?to=https://www.cnblogs.com/lskzj/p/11143233.html

#更多程式相關知識，請造訪：程式設計教學！ ！

以上是了解Angular中的變化偵測（Change Detection）機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！