Angular 2 - 没有可怕 URL 的命名路由器导出

Question

我想要两个路由器 socket ，一个是主 socket ，另一个是模态 socket 。当导航到 /login 时，我想在主 socket 中显示我的主页组件，在模态 socket 中显示我的登录组件。像这样:

{
   path: 'login',
   component: HomeComponent
},
{
   path: 'login',
   component: LoginComponent,
   outlet: 'modal'
}

这可以通过使用像 /home(modal:login) 这样可怕的辅助 URL 来实现，但当然没有人希望他们的 URL 看起来像那样。

如果没有这些 URL，我该如何解决这个问题？

Answer 1

你为什么不选择无组件路线，

{
    path: 'login',
    children: [
        {
            path: '',
            component: HomeComponent
        },
        {
            path: '',
            component: LoginComponent,
            outlet: 'modal'
        }
    ]
}

这将确保当您的路由是/login 时，HomeComponent 将进入主导出，而 LoginComponent 将进入名为“modal”的路由器导出。