Question

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

我有app-routing.module.ts，其中有3个routes数组条目： 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父级中的任何路由-父级将保留在命令行管理程序中。同样的情况也朝着其他方向发展。如果首先加载Case路由，则在重定向到Shell路由后，父级将保持这种情况。

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

Answer 1

基本上，我已经解决了这个问题。对于那些有相同问题的人-对我来说，问题在于实施自定义路由可重用策略。当我从Case切换到Shell时，路由可重用策略功能shouldReuseRoute返回true，因此路由被重用。

在Angular 8 Router中，与其他父级导航到该路由时，父级路由保持不变

1 个答案: