在 Angular 8 路由器中，当导航到与其他父级的路由时，父级路由保持不变答案

【问题标题】：In Angular 8 Router parent route remains the same when navigating to the route with other parent在 Angular 8 路由器中，当导航到与其他父级的路由时，父级路由保持不变
【发布时间】：2020-02-19 19:56:33
【问题描述】：

我正在开发一个使用 Angular (v8.2.8) 编写的项目，并使用具有相同版本的路由器。路由的架构如下：

我有 app-routing.module.ts，其中有 routes 数组的 3 个条目： Shell.childRoutes([...array of routes]), Case.childRoutes([...array of routes]), { path: '**', redirectTo: '/', pathMatch: 'full' }

Shell - 这是应用程序内部页面的父组件。案例 - 即应用公共页面的父组件。

方法子路由对两个组件的作用几乎相同：

export class Shell {
  static childRoutes(routes: Routes): Route {
    return {
      path: 'app',
      component: ShellComponent,
      children: routes,
      canActivate: [AuthenticationGuard],
      data: { reuse: true }
    };
  }
}

和

export class Case {
  static childRoutes(routes: Routes): Route {
    return {
      path: '',
      component: CaseComponent,
      children: routes,
      data: { reuse: true }
    };
  }
}

应用程序有dashboard 组件用于Shell 父组件和home 组件用于Case 父组件。用户在home 路由处加载页面，标记如下：

<app-root>
  <app-case> 
    <router-outlet></router-outlet>
    <app-home></app-home>
  </app-case>
</app-root>

重定向到dashboard 路由后，我希望有以下标记：

<app-root>
  <app-shell> 
    <router-outlet></router-outlet>
    <app-dashboard></app-dashboard>
  </app-shell>
</app-root>

但我收到了

<app-root>
  <app-case> 
    <router-outlet></router-outlet>
    <app-dashboard></app-dashboard>
  </app-case>
</app-root>

所以确切的问题在于测试用例：用户在 Shell 父级中存在的路由上。然后，如果用户将被重定向到 Case 父级中的任何路由 - 父级将保留 Shell。同样的情况也适用于其他方向。如果先加载Case 路由，重定向到Shell 路由父级后将保持这种情况。

我尝试在childRoutes方法中编辑不同的参数，但没有成功，我只是不明白是引擎的问题，还是我只需要指定一些额外的参数。

【问题讨论】：

标签： javascript angular angular8 angular-router nested-routes

【解决方案1】：

基本上我解决了这个问题。对于那些有同样问题的人 - 对我来说，问题在于实施的自定义路线可重用策略。当我从Case 切换到Shell route-reusable-strategy 时，函数shouldReuseRoute 返回true，所以路由被重用了。

【讨论】：