在 canActivate Guard 中访问 ActivatedRoute 的组件

Mic*_* L. 5 typescript angular-routing angular angular-router-guards angular-router

据我所知,它的调用签名是canActivate这样的:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

}
Run Code Online (Sandbox Code Playgroud)

我有一个服务,它需要一个组件的名称并返回访问该组件所需的用户角色,以便我可以检查canActivate我的守卫功能,活动用户是否具有相应的角色。我的问题是,我不知道如何访问该组件。经过一番谷歌搜索后,我找到了这样的解决方案:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  const nameOfComponent = route.routeConfig.component.name;
  return doSomeRoleCheck(nameOfComponent);
}
Run Code Online (Sandbox Code Playgroud)

但就我而言,我只是收到一个错误:“无法读取未定义的属性‘名称’”。如何访问活动路由的组件,尤其是作为字符串的名称?

编辑

我发现,我确实在父路线上检查了这个守卫。当我在子路由中检查它时,它可以工作。如何从父组件访问子组件ActivatedRouteSnapshot

chr*_*spy 6

像这样的事情可能适用于您的情况:

export abstract class RoleCheck {
  myRoles: string[];
}

@Component({ ... })
export class YourComponent extends RoleCheck {
  public myRoles = ['User', 'Admin'];
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if (!route.routeConfig.component instanceof RoleCheck) {
    //Throw
  }
  return doSomeRoleCheck(route.routeConfig.component.myRoles)
}
Run Code Online (Sandbox Code Playgroud)