Question

我的角度应用有新设计和旧设计。新设计具有一些额外的组件和功能。我想在新旧UI之间切换此应用程序。我正在计划添加辅助路线，很遗憾，该路线无法正常工作。我想为我的组件使用相同的路径。我们是否有其他替代方法可以实现这一目标？

Answer 1

您可以在应用程序的根目录中拥有2个惰性模块（A和B），一个用于旧设计，一个用于新设计，然后在其中定义路由。

1-通过传递以下路由配置来定义您的应用路由：

[
  {
    path: '',
    loadChildren: () => import('./a/a.module').then(m => m.AModule)
  }
];

2-创建一个交换服务，通过设置如下所示的新路由来按需更改路由：

交换服务：

class SwitchService {
  constructor(private router: Router) {}

  switchRoutes() {
    this.router.resetConfig([
      {
        path: '',
        loadChildren: () => import('./b/b.module').then(m => m.BModule)
      }
    ]);

    this.router.navigateByUrl(this.router.url);
  }
}

3-导入应用程序路由时，不要忘记添加以下配置{ onSameUrlNavigation: 'reload' }，以便在切换并保持在相同的url（this.router.navigateByUrl(this.router.url)方法中的switchRoutes ）：

imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })]

您可以考虑使用更复杂的交换服务随时随地进行切换

希望有帮助！

角度多重路由

1 个答案: