Javascript 共享服务：ExpressionChangedTerrithasBeenCheckedError:表达式在检查后已更改

我在Angular 4方面不是很有经验，所以我不确定这个问题是如何解决的。我得到以下错误

错误：ExpressionChangedTerrithasBeenCheckedError:表达式在检查后已更改。上一个值：“true”。当前值：“false”

这是我的设置。我有一个组件“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>

比如说。我有一个MenuComponent和EditLinkComponent，它们将被加载到MenuComponent中。根据主组件中加载的组件，我想显示两个小部件。但是使用这个服务我得到了上面的错误

下面的内容并不重要，但可以让你更了解我正在尝试做什么

当用户看到菜单组件的索引时，我想显示一个菜单位置列表，当我单击菜单位置时，它应该在该位置显示菜单，当我单击菜单时，它应该在菜单中显示链接。当我点击编辑链接时，它应该显示EditLinkComponent。例如，这是通过角度路由器实现的#cms/menus然后#cms/menus/{menuid}然后#cms/menus/{menuid}/链接/{linkid}/编辑

问题是如果我在刷新#cms/menus/{menuid}/links/{linkid}/edit我得到了错误

错误：ExpressionChangedTerrithasBeenCheckedError:表达式在检查后已更改。上一个值：“true”。当前值：“false”

我认为这与试图从服务器加载placement对象和menu对象有关。

以下是修复方法（您需要手动触发更改检测）：

这篇文章应该给你所有的答案

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

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