有没有办法在角度上实现两步路由？

Question

我甚至不确定如何命名我的问题。我也想避免使用二级路线。我一直在尝试在角度应用程序中创建类似两步路由的东西。

理论上，这应该是嵌套路由。但我认为假设是，如果您使用无组件路由，则子路由将路由到父插座，这不起作用。在每个特征路线中使用相同的组件是解决方案＃2。我希望介于两者之间，这对于所有无组件子路由都是相同的“包装器”。

外部路由

外部路由器有2条路由：

• /login：显示登录组件
• 其他一切都应该包含在app shell中。应用程序外壳是一个带侧边栏，导航栏和路由器插座的组件，其中所有实际内容都应该出现

内部路由

该应用程序具有多个功能模块，理想情况下，每个模块都应定义其路由。一个例子可能是用户档案：

• /profile/settings：显示shell中的设置
• /profile/account：显示shell中的帐户详细信息

解决方案1 ​​

为每个模块定义一个通用路由模块，例如AppRoutingModule：

const routes: Routers = [
  { path: 'login', component: LoginComponent },
  { path: '', component: AppShellComponent, children: [...] }
]

这限制了我正确分离或使用延迟加载等功能。

https://stackblitz.com/edit/angular-routing-solution1

解决方案2

在每个路由模块上使用AppShellComponent，例如ProfileRoutingModule

const routes: Routes = [
  { path: 'profile', component: AppShellComponent, ... }
]

这更接近解决方案，但现在我有多个AppShellComponent实例，这意味着每次应用程序从一个模块导航到另一个模块时会有额外的资源和重新加载。

https://stackblitz.com/edit/angular-routing-solution2

解决方案3

一个组件封装了login和shell组件。它知道应用程序是否已登录并显示模板的相应部分。这将路由到''。这违背了我试图制定的解决方案的目的。

我缺少一个解决方案吗？ ：/

Answer 1

你确实需要嵌套路由;您似乎缺少的部分是使用LoadChildren来定义哪些孩子进入＆＃34; shell＆＃34;。

基本上，您的应用程序路由模块将是（示例使用延迟加载）：

 {
    path: '',
    component: ShellComponent,
    children: [
        { path: 'profile', loadChildren: 'profile/profile.module#ProfileModule' },
        ...
    ],
 },
 {
    path: 'login'
    component: LoginComponent
 }

ShellComponent当然有自己的router-outlet

Answer 2

我也遇到同样的问题。我尝试了很多事情：引导不同的模块，不同的根组件，并通过路由器模块配置解决问题。在我的情况下，需要添加包装器外壳，仅一个包装所有功能模块。

最后，我找到了一个简单的解决方案。您可以在router-outlet中提供任意数量的AppComponent，但根据某些情况只能保留1。因此，我制作了1个router-outlet，其中包含应用程序外壳样式，另1个为我的特殊情况。