角度2：在檢查子組件屬性后對其進行了更改

Question

我有兩個選項卡組件，它們傳遞相同的模型數據，但使用自定義管道過濾：

<md-tab-group>
    <md-tab label="All ({{ allPeople.count }})">
        <tab-content #allPeople [content]="data"></tab-content>
    </md-tab>

    <md-tab label="Tennagers ({{ teenagers.count }})">
        <tab-content #teenagers [content]="data | filterByAge: 20"></tab-content>
    </md-tab>
</md-tab-group>

在父組件上，我要訪問子代的屬性。 如您所見，我正在使用ID連接： {{ allPeople.count }}

在子組件上，我具有ngOnChanges()方法，該方法進行一些計算並返回count屬性：

ngOnChanges() {
    this.count = this.countPeople();
}

使用這種方法，它可以工作，但是會出現以下控制台錯誤：

檢查后表達式已更改。 先前值：“全部（0）”。 當前值：“全部（4）”。

我知道它僅出現在開發模式中，但是我也不知道這不是一個好習慣。 當我進行相同的更改時，還有另一種方法可以訪問子屬性count 。

這是一個工作示例： https : //plnkr.co/edit/YlKxh81ejJF7zofc4310?p=preview

Answer 1

當更改檢測導致模式更改時，您會收到此錯誤。 由於ngOnChanges()是由更改檢測調用的，因此這可能是導致您的錯誤的原因。 您可以解決在更新后顯式調用更改檢測的問題。

constructor(private cdRef:ChangeDetectorRef) {}

ngOnChanges() {
    setTimeout(() => this.count = this.countPeople());
    // this.cdRef.detectChanges();
}

我不知道為什么detectChanges()在您的情況下不起作用，但是setTimeout()起作用了。 我認為它與其他組件有關，具體取決於更改。 detectChanges僅適用於當前組件。