在 Angular 中手動觸發變化檢測

Question

我正在編寫一個具有屬性Mode(): string的 Angular 組件。

我希望能夠以編程方式設置此屬性，而不是響應任何事件。

問題是在沒有瀏覽器事件的情況下，模板綁定{{Mode}}不會更新。

有沒有辦法手動觸發這種變化檢測？

Answer 1

嘗試其中之一：

• ApplicationRef.tick() - 類似於 AngularJS 的$rootScope.$digest() -- 即檢查完整的組件樹
• NgZone.run(callback) - 類似於$rootScope.$apply(callback) - 即，評估 Angular 區域內的回調函數。 我認為，但我不確定，這最終會在執行回調函數后檢查完整的組件樹。
• ChangeDetectorRef.detectChanges() - 類似於$scope.$digest() -- 即，僅檢查此組件及其子組件

您可以將ApplicationRef 、 NgZone或ChangeDetectorRef注入到您的組件中。

Answer 2

我使用了已接受的答案參考並想舉個例子，因為 Angular 2 文檔非常難以閱讀，我希望這更容易：

1. 導入NgZone ：

    import { Component, NgZone } from '@angular/core';

2. 將它添加到您的類構造函數

   constructor(public zone: NgZone, ...args){}

3. 使用zone.run運行代碼：

    this.zone.run(() => this.donations = donations)

Answer 3

我能夠用markForCheck()更新它

導入 ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

注入並實例化它

constructor(private ref: ChangeDetectorRef) { 
}

最后標記要進行的更改檢測

this.ref.markForCheck();

這是一個示例，其中 markForCheck() 有效而 detectChanges() 無效。

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

編輯：這個例子不再描述問題了：（我相信它可能正在運行一個更新的 Angular 版本，它已被修復。

（按 STOP/RUN 再次運行）

Answer 4

在 Angular 2+ 中，試試 @Input 裝飾器

它允許在父組件和子組件之間進行一些很好的屬性綁定。

首先在父級中創建一個全局變量來保存將傳遞給子級的對象/屬性。

接下來在子級中創建一個全局變量來保存從父級傳遞的對象/屬性。

然后在使用子模板的父 html 中，添加帶有子變量名稱的方括號符號，然后將其設置為等於父變量的名稱。 例子：

<child-component-template [childVariable] = parentVariable>
</child-component-template>

最后，在子組件中定義子屬性的地方，添加 Input 裝飾器：

@Input()
public childVariable: any

當您的父變量更新時，它應該將更新傳遞給子組件，子組件將更新其 html。

此外，要觸發子組件中的函數，請查看 ngOnChanges。

Answer 5

我正在編寫一個具有屬性Mode(): string的Angular組件。

我希望能夠以編程方式設置此屬性，而不響應任何事件。

問題在於，在沒有瀏覽器事件的情況下，模板綁定{{Mode}}不會更新。

有沒有一種方法可以手動觸發此更改檢測？