共有サービス：ExpressionChangedAfterItHasBeenCheckedError：チェックされた後に式が変更されました

Question

私はAngular 4でよく経験していないので、この問題の仕組みがわかりません。私は次のエラーを受け取ります。

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

これは私の設定です。 <router-outlet></router-outlet>を使用して他のコンポーネントを読み込むコンポーネントmenus.component.ts（MenusComponent）があります。このエラーは、以下のコードのLocalService.placementListShow.valueで発生します。

<div class="row"> 
    ... 
</div> 
<!-- end row --> 
<div class="row"> 
    <div class="col-md-4 col-sm-4 col-xs-12 col-xl-3" *ngIf="LocalService.placementListShow.value"> 
    <div class="card m-b-20" *ngIf="LocalService.AllPlacements.Loaded && !LocalService.AllPlacements.Loading"> 
     ... 
     <button type="button" class="list-group-item" [ngClass]="{'active': LocalService.AllPlacements.Active.value==placement.id }" (click)="LocalService.AllPlacements.Activate(placement.id)" *ngFor="let placement of LocalService.AllPlacements.Placements">{{placement.title}}</button> 
     ... 
    </div> 
    <single-element-loader *ngIf="LocalService.AllPlacements.Loading"></single-element-loader> 
    </div><!-- end col--> 
    <div class="col-md-4 col-sm-4 col-xs-12 col-xl-3" *ngIf="LocalService.menuListShow.value"> 
    ... 
     <a [routerLink]="[menu.id]" class="list-group-item" [ngClass]="{'active': LocalService.PlacementMenus.Active.value==menu.id }" (click)="LocalService.PlacementMenus.Activate(menu.id)" *ngFor="let menu of LocalService.PlacementMenus.Menus">{{menu.title}}</a> 
    ... 
    <single-element-loader *ngIf="LocalService.PlacementMenus.Loading"></single-element-loader> 
    </div><!-- end col--> 
    <div class="col-md-8 col-sm-8 col-xs-12 col-xl-9"> 
    <router-outlet></router-outlet> 
    </div><!-- end col--> 
</div> 

コンポーネントは、角度ルータを使用して子コンポーネントを読み込むという考えがあります。子コンポーネントのメインコンポーネントの特定のウィジェットの可視性を制御して、ローカルサービスをセットアップしたいと考えています。

@Injectable() 
export class LocalService { 
    menuListShow = new BehaviorSubject(false); 
    placementListShow = new BehaviorSubject(true); 
    Menu: Menu = new Menu(); 
    AllPlacements: AllPlacements = new AllPlacements(); 
    PlacementMenus: PlacementMenus = new PlacementMenus(); 

    constructor(
     private MenuService: MenuService, 
     private route: ActivatedRoute, 
) { 
    } 

    changeMenuComponents(componentName: string): void { 
    alert ("Changing to: "+ componentName) 
    let menuState = { 
     'placementList': (that): void => { 
     that.menuListShow.next(false); 
     that.placementListShow.next(true); 
     }, 
     'menuList': (that): void => { 
     that.placementListShow.next(false); 
     that.menuListShow.next(true); 
     } 
    }; 
    menuState[componentName](this); 
    } 
} 

たとえば、私はMenusComponentにロードされるMenuComponentとEditLinkComponentを持っています。メインコンポーネントにどのコンポーネントがロードされているかによって、表示したいウィジェットが2つあります。しかし、私は上記のエラーを取得するサービスを使用しています。

以下はあまり重要ではありませんが、私が何をしようとしているかについてより多くのアイデアを伝えることです。

MenusComponentのインデックスが表示されているときにメニュープレースメントのリストを表示したいのですが、メニュープレースメントをクリックするとそのプレースメントのメニューが表示されます。メニューをクリックすると、メニュー。編集リンクをクリックすると、EditLinkComponentが表示されます。これは例えば角度ルータを介して発生します。 ＃cms/menus then＃cms/menus/{menuid}次に＃cms/menus/{menuid}/links/{linkid} /編集

問題は、 ＃cms/menus/{menuid}/links/{linkid}/editエラーが発生しました。

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

これは、サーバーからプレースメントオブジェクトとメニューオブジェクトを読み込もうとしていると思います。

Answer 1

ここで（手動で変更検出をトリガーする必要があります）、それを修正する方法は次のとおりです。

@Injectable() 
export class LocalService { 
    menuListShow = new BehaviorSubject(false); 
    placementListShow = new BehaviorSubject(true); 
    Menu: Menu = new Menu(); 
    AllPlacements: AllPlacements = new AllPlacements(); 
    PlacementMenus: PlacementMenus = new PlacementMenus(); 

    constructor(
     private changeDetectorRef: ChangeDetectorRef, 
     private MenuService: MenuService, 
     private route: ActivatedRoute, 
) { 
    } 

    changeMenuComponents(componentName: string): void { 
    alert ("Changing to: "+ componentName) 
    let menuState = { 
     'placementList': (that): void => { 
     that.menuListShow.next(false); 
     that.placementListShow.next(true); 
     }, 
     'menuList': (that): void => { 
     that.placementListShow.next(false); 
     that.menuListShow.next(true); 
     } 
    }; 
    menuState[componentName](this); 
    this.changeDetectorRef.detectChanges(); 
    } 
}