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();
}

使用这种方法，它可以工作，但会出现以下控制台错误：

检查后表情发生了变化。以前的价值：＆＃39;全部（0）＆＃39 ;.当前价值：＆＃39;全部（4）＆＃39;。

我知道它只出现在开发模式中，但我也知道这不是一个好习惯。当我有相同的更改时，是否有另一种方法可以访问子属性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仅适用于当前组件。

Angular 2：在访问子组件属性后检查表达式已更改

1 个答案: