Question

我有一个项目，该项目的路由模块具有以下路径：

{ path: 'account-settings', component: AccountSettingsComponent, canActivate: [LearningRedirectGuard],
    children: [
      { path: '', redirectTo: 'account', pathMatch: 'full'},
      { path: 'account', component: AccountComponent, data: { menuType: 'learning' }},
      { path: 'password', component: PasswordComponent,  data: { menuType: 'learning' }},
      { path: 'notifications', component: NotificationsComponent,  data: { menuType: 'learning' }},
      { path: 'preferences', component: PreferencesComponent,  data: { menuType: 'learning' }},
      { path: 'security', component: SecurityComponent,  data: { menuType: 'learning' }},
    ]
  }

这个项目被导入到另一个更大的项目中

  {
    path: 'learning',
    loadChildren: './../../projects/pxLearning/src/app/app.module#LearningModule',
  },

当我尝试访问此路线时（通过单击带有[routerLink]="['/learning/account-settings/account']"的按钮）

/learning/account-settings/account

AccountComponent（或其他帐户）运行正常

但是，如果我尝试刷新页面，则相同的路由不会实例化AccountComponent（或其他）。发生相同的事情是，我在浏览器中键入url，不会实例化组件。

为什么会这样？

编辑： LearningGuard

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (state.url.indexOf('learning') === -1) {
      this.router.navigate(['/learning/' + state.url]);
    }
    return true;
  }

Answer 1

if (state.url.indexOf('learning') === -1) {

您可以将此行重写为

if (!state.url.contain('learning')) {

因此，当您现在不在学习路线上时，请始终进行导航。这意味着您将被重定向到另一条路由，该路由甚至可能根本不存在，并且您的路由与任何组件都不匹配。

重载路线未显示组件

1 个答案: