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

Posted 2021-04-25

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

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

Outer routing

外部路由器有2条路由：

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

Inner routing

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

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

Solution 1

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

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

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

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

Solution 2

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

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

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

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

Solution 3

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

---

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

答案

你确实想要嵌套路由;你似乎缺少的那块是使用LoadChildren来定义哪些孩子进入“shell”。

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

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

ShellComponent当然有自己的router-outlet