Angular2更改檢測「檢查後表達式已更改」

我在Angular2（最終版）中遇到了有關組件之間更改檢測和數據流的問題。我已經解決了這個問題，但對我來說這似乎有點冒險所以想知道是否有更好的方法來做到這一點。Angular2更改檢測「檢查後表達式已更改」

基本上我有一個具有一個子組件B和也* ngFor創建C.

子組件的數量對於每一個組分C組分A，存在定義了在父組件中處理的@Output A.根據該輸出，確定組件A上的另一個屬性（只是一個數字），在組件B上用作@Input。

在DEV模式下，每次組件C中的@Output被觸發，我在控制檯中出現錯誤：

Expression has changed after it was checked. Previous value: XX. Current value: XX.

從閱讀中可以看出，它的類型是由於Angular2中的單向數據流引起的。我想知道如何在我的場景中正常工作？

我暫時在A組份注入ChangeDetectorRef並調用其detectChanges()方法，從C. 的實例處理@Output事件的函數我擔心它的效率並不高壽。我可以嘗試改進它，並且只在最後一個項目的事件（所有C組件同時發送該事件）之後調用它，但是然後我會擔心事件的異步性質和一些意外行爲。

有沒有人有一個想法如何克服這個問題？我的設計在組件之間的數據流方面是否存在根本上的缺陷？我應該去做一些共享服務而不是交換數據嗎？

任何幫助非常感謝。

來源

2017-01-23 Zyga

當更改檢測運行導致模型更改時，會引發錯誤。例如，如果您在更改檢測調用的'ngOnChanges（）'中更改模型。我們需要查看更多代碼來追蹤原因。當一個函數被綁定時，通常會導致它每次調用時都會返回一個新的對象實例。 –

@GünterZöchbauer就是這樣發生的事情。組件C的每個實例都有ngOnChanges（），它會發出事件並導致父組件A中的模型更改。那麼應該避免哪些內容？ – Zyga

你可以注入private cdRef:ChangeDetectorRef並在ngOnChanges()末調用this.cdRef.detectChanges()。通過這種方式，Angular會再次檢測變化，並且不會抱怨以前修改的模型值。

class MyComponent { 
    constructor(private cdRef:ChangeDetectorRef) {} 

    ngOnChanges(changes) { 
    this.xxx = ... 
    ... 
    this.cdRef.detectChanges(); 
    } 
}

來源

2017-01-23 13:34:03

在我的情況下，它不會工作，如果我在ngOnChanges中這樣做，就像發生在組件A的子組件中一樣，然後更改組件A中另一個子組件B的值（通過將事件發回到A並更新相關屬性用作孩子B的輸入）。然而，它將在組件的A方法中處理從C接收的事件。我只是認爲它在Angular2中做到了「哈克」，並且想知道是否應該重新考慮在組件之間傳遞數據的方式。 – Zyga

通常使用共享服務與observables是一個好主意。觀察對象不會導致變更檢測。 –

Angular2更改檢測「檢查後表達式已更改」

回答

相關問題