角度2：在检查子组件属性后对其进行了更改

Question

I have two tab components that I pass the same model data but filtered with a custom pipe:

<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>

On the parent component, I want to access a property of a child. As you see I am doing that with ID connection: {{ allPeople.count }}

On the child component, I have ngOnChanges() method that do some calculations and return the count property:

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

With this approach, it works but the following console error appears:

Expression has changed after it was checked. Previous value: 'All (0)'. Current value: 'All (4)'.

I know that it appears only in the development mode, but I also know that it is not a good practice. Is there another way that I can access the child property count when I have same changes on with.

Here is a working example: https://plnkr.co/edit/YlKxh81ejJF7zofc4310?p=preview

Answer 1

You get this error when change detection causes changes to the mode. Because ngOnChanges() is called by change detection, this is probably what causes the error in your case. You can work around be calling change detection explicitely after the update.

constructor(private cdRef:ChangeDetectorRef) {}

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

I don't know why detectChanges() didn't work in your case, but setTimeout() did. I assume it's related to other components depending on the change. detectChanges works only on the current component.