如何避免在子级中更改父级值时出现ExpressionChangedAfterIsBeenCheckedError?

在我们的应用程序中,路由器出口位于 app.component . 侧边栏的可见性由 SideBarService . 用于切换侧边栏的按钮使用 *ngIf 显示或隐藏箭头。

<div id="sidebar" [style.width.px]="this.sideBarService.getWidth()">
    <router-outlet></router-outlet>
    <a id="sidebar-toggle-button" (click)="toggleSideBar()">
        <div *ngIf="this.sideBarService.hidden; then inactive else active"></div>
        <ng-template #active><i class="material-icons ui-icon-chevron-left"></i></ng-template>
        <ng-template #inactive><i class="material-icons ui-icon-chevron-right"></i></ng-template>
    </a>
</div>

以及服务:

@Injectable()
export class SideBarService{
    public width: number;
    public hidden;

    public changeWidth(width: number): void {
        this.width = width;
    }

    public getWidth(): number {
        return (this.hidden === true ? 0 : this.width);
    }

    public hide(): void {
        this.hidden = true;
    }

    public show(): void {    
        this.hidden = false;
    }
}

现在,这个地方 sideBarService.hidden

检查之后。上一个值:“ngIf:未定义”。当前 value:'ngIf:false'。

我相信这是因为更改是由应用程序组件的子组件触发的。但我不明白我该如何解决这个问题。