Angular 2 - Named router outlets without horrible URLs

问题

I want to have two router outlets, the primary one, and a modal outlet. When navigating to /login, I want to show my home component in the primary outlet, and my login component in the modal outlet. Something like this:

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

This is possible to do by using horrible auxiliary URLs like /home(modal:login), but of course no one wants their URLs to look like that.

How do I solve this without these URLs?

回答1:

Why don't you go for component less routes,

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

This will make sure that when your route is /login, HomeComponent will go in primary outlet and LoginComponent will go to router-outlet with name 'modal'.

回答2:

FYI, we encountered the same problem and solved it according to this response: https://stackoverflow.com/a/58915611/9260456

来源：https://stackoverflow.com/questions/39726345/angular-2-named-router-outlets-without-horrible-urls