ExpressionChangedAfterItHasBeenCheckedError一路由两个组件

时间:2019-01-16 22:58:48

标签: components angular2-routing

我有/辅导路线。

如果我是超级管理员,则可以从系统中查看所有教练管理员的列表(在/教练路线上(按按钮),猜测正确)。 如果我是教练管理员,则可以从系统中查看所有教练的列表。 (再次,我想使用相同的/教练路线)。

在这种情况下,我创建了3个组件:CoachAdminListComponent,CoachListComponent和CoachComponent。 CoachComponent的html如下所示:

<app-coach-admin-list
  *ngIf="isCurrentUserSuperAdmin()"
  [items]="coachAdmins$ | async"
  [itemInfo]="coachAdminInfo$ | async"
  [loggedUser]="loggedUser"
  [cachedItems]="allCoachAdmins$ | async"
  [loading]="loading"
  (onSubmit)="handleOnSubmit($event)"
  (onFilter)="handleOnFilter($event)"
  (onMenuItem)="handleOnMenuItem($event)">
</app-coach-admin-list>
<app-coach-list
  *ngIf="!isCurrentUserSuperAdmin()"
  [items]="coaches$ | async"
  [itemInfo]="organisationInfo$ | async"
  [loggedUser]="loggedUser"
  [cachedItems]="allCoaches$ | async"
  [loading]="loading"
  (onSubmit)="handleOnSubmit($event)"
  (onFilter)="handleOnFilter($event)"
  (onMenuItem)="handleOnMenuItem($event)">
 </app-coach-list>

我知道这是一个丑陋的代码,但是当角色方便时如何显示每个组件?

尝试以教练管理员身份登录时遇到以下错误:

 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression 
 has changed after it was checked. Previous value: '[object Object]'. 
 Current value: 'false'.

coach.module.ts:

const routes: Routes = [{
 path: 'coaching',
 component: CoachComponent,
 canActivate: [AuthGuard]
}];

当然,coach组件的文件中包含2个模块,所以我试图找到如何在没有错误的情况下并且以清晰的方式呈现此模块?

谢谢。

1 个答案:

答案 0 :(得分:0)

尝试将isCurrentUserSuperAdmin设置为属性而非函数, 在ngOnInit()中进行设置。

您的组件类现在看起来像

export class CoachComponent implements OnInit{ 
     isUserSuperAdmin:boolean;

     public ngOnInit(){
            this.isUserSuperAdmin = this.CheckIfSuperAdmin();
     }
     public CheckIfSuperAdmin(){
         //your logic to check if super admin
     }

}