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

Question

我想要两个路由器出口，一个是主出口，另一个是模态出口。导航到时/login，我想在主要出口中显示我的home组件，在模式出口中显示我的登录组件。像这样：

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

这可以通过使用可怕的辅助网址（例如）来实现/home(modal:login)，但是当然没有人希望其网址看起来像那样。

没有这些网址该如何解决？

Answer 1

你为什么不走少零件路线，

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

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