Angular CanActivate guard重定向到/在初始加载时，路由器出口不呈现

我和AuthGuard一起做SPA。如果未记录使用，页面重定向错误页面，否则重定向特定路由。现在

用户未登录

调用

/dashboard

和

authURAD

重定向

/error？returnUrl=/dashboard

用户呼叫

/login？key=112233

登录页面订阅

AuthService

并创建用户令牌和重定向

/dashboard

在渲染之前，

/dashboard

触发了AuthGuard和AuthGurad，让它们可以导致一切正常

/dashboard

正常渲染

用户需要浏览

/claim/search页面

路由器更改页面URL，但

路由器出口

不呈现重定向组件

如果用户刷新浏览器的窗口页面正常工作，否则SPA不工作

我的问题在第8步，第9步

我的路线：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardPageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'claim',
    canActivate: [AuthGuard],
    children: [{
      path: 'search',
      component: ClaimSearchPageComponent,
    },
    {
      path: 'detail/:id',
      component: ClaimDetailPageComponent,
    }]
  },
  {
    path: 'login',
    component: LoginPageComponent,
  },
  {
    path: 'error',
    component: ErrorPageComponent,
  },
  {
    path: '**',
    component: ErrorPageComponent,
  }
];

登录页面：

ngOnInit() {
    this._returnUrl = this._route.snapshot.queryParams['returnUrl'] || '/';
    this._encryptedKey = this._route.snapshot.queryParams['key'];
    this._authenticationService.login(this._encryptedKey)
      .subscribe(
        data => {
          this._router.navigate([this._returnUrl]);
        });
  }

身份验证服务：

public get isLogged(): boolean {
    return !!this.currentUserSubject.value;
}
public login(encryptedKey: string) {
    return super.httpPostModel(User, environment.apiService.endPoints.user.login, { key: encryptedKey }).pipe(map(user => {
        sessionStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        return user;
    }));
}

授权守卫

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this._authenticationService.isLogged) {
        return true;
    }
    this._router.navigate(['/error'], { queryParams: { returnUrl: state.url } });
    return false;
}

---

在管线中，还需要为父组件（索赔组件）指定组件属性

试试这个：

{
    path: 'claim',
    component: ClaimPAgeComponent,
    canActivate: [AuthGuard],
    children: [{
      path: 'search',
      component: ClaimSearchPageComponent,
    },
    {
      path: 'detail/:id',
      component: ClaimDetailPageComponent,
    }]
  }

---

对于无组件路由（无路由器出口），您可以使用canActivateChild而不是canActivate，我建议您仅添加包含该内容的ClaimComponent

<router-outlet></router-outlet>

如果是无组件路由，则在激活任何子路由之前，canActivateChild将运行：

{
 path: 'claim',
 canActivateChild: [AuthGuard],
 children: [{
   path: 'search',
   component: ClaimSearchPageComponent,
 },
 {
   path: 'detail/:id',
   component: ClaimDetailPageComponent,
 }]
},

{
 path: 'claim',
 canActivateChild: [AuthGuard],
 children: [{
   path: 'search',
   component: ClaimSearchPageComponent,
 },
 {
   path: 'detail/:id',
   component: ClaimDetailPageComponent,
 }]
},