Angular 2-没有可怕URL的命名路由器出口 [英] Angular 2 - Named router outlets without horrible URLs

问题描述

我想有两个路由器插座，一个是主插座，另一个是模态插座.导航到/login时，我想在主要插座中显示我的home组件，在模式插座中显示我的登录组件.像这样:

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'
}

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

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.

在没有这些URL的情况下，我该如何解决?

How do I solve this without these URLs?

推荐答案

为什么不选择组件较少的路线，

Why don't you go for component less routes,

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

这将确保当您的路由为/login时，HomeComponent进入主出口，LoginComponent进入名称为"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'.

这篇关于Angular 2-没有可怕URL的命名路由器出口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！