Angular 2 路由器 - 命名插座答案

【问题标题】：Angular 2 Router - Named outletsAngular 2 路由器 - 命名插座
【发布时间】：2016-08-25 10:09:40
【问题描述】：

文档不是很好，但我试图在同一页面/路由上有不同的路由器出口。

我的 app.component.html 中有这个

<router-outlet></router-outlet>
<router-outlet name="dashboard"></router-outlet>

我的 app.routes.ts

{
    path: '',
    component: HomeComponent,
    outlet: 'primary'
},
{
    path: '',
    component: DashboardComponent,
    outlet: 'dashboard'
},
{
    path: '**',
    redirectTo: '404'
}

所以在我的起始页（即“example.com”，而不是“example.com;dashboard:dashboard”）上，我想在主路由器插座中显示 Homecomponent，在 Dashboard 插座中显示我的 Dashboardcomponent。这适用于 ngrs/router，但由于它已被弃用，我正在尝试迁移。角度/路由器中没有 ;dashboard:dashboard 是否可行？

使用此配置，我被重定向到 404。我也尝试过，但没有运气：

{
    path: '',
    component: HomeComponent,
    children: [
        {
            path: '',
            component: DashboardComponent,
            outlet: 'dashboard'
        }
    ]
},

有没有人设法让命名的路由器插座正常工作？

更新关于从 ngrx/router 到 angular/router 的迁移说明，您应该能够拥有：

{
    path: 'blog',
    component: HomeComponent,
    outlet: 'main'
},
{
    path: 'blog',
    component: RegisterComponent,
    outlet: 'dashboard'
}

但是当我访问 example.com/blog 时，我在控制台中收到此错误：

错误：无法匹配任何路由：“博客”

https://github.com/ngrx/router/blob/master/docs/overview/migration.md

【问题讨论】：

抱歉，那个 Plunker 包含的代码太多。
是的，很抱歉，但您知道是否有可能做到这一点？网址中没有很多东西。如果我在起始页上有 4 个路由器插座，我不希望 url 看起来像这样：example.com(dashboard:dashcmp)(menu:troll)(footer:extralongfooter) etc..
我很确定没有办法在 URL 中显示这些部分。
您可能会遇到 Angular 解析要使用的路由对象的方式的问题。 "The router uses a first-match wins strategy when matching routes"。它隐藏在文档中（不支持哈希链接，当然），但是如果您搜索该引用，您应该会找到它。也许具有相同路径的兄弟路由会导致问题？
我同意关于路由器插座的文档是一团糟。但他们希望你购买一份好的文档：leanpub.com/router

标签： angular angular2-routing ngrx

【解决方案1】：

试试这个配置：

{
    path: 'wrap',
    component: HomeComponent,
    children: [
        {
            path: 'dash',
            component: DashboardComponent,
            outlet: 'dashboard'
        }
    ]
}

与：

this.router.navigateByUrl('/wrap(dashboard:dash)');

我不知道为什么需要一个 url 片段（比如我添加的“包装”），但它可以工作......

和其他人：

{
    path: 'blog',
    component: HomeComponent,
    outlet: 'main'
},
{
    path: 'blog',
    component: RegisterComponent,
    outlet: 'dashboard'
}

与：

this.router.navigateByUrl('/(main:blog)');
this.router.navigateByUrl('/(dashboard:blog)');

【讨论】：

它不适合我。是否有可能提供一个 plunker
感谢您的支持。它现在为我工作。我想在 this.router.navigate() 方法中做同样的事情。我可以做同样的事情吗？
我用this.router.navigate(['', { outlets: { dashboardoutlet: 'dashboard' } }]);更新了plnkr
有没有一种方法可以在默认情况下调用我的“路由”时加载插座。我的意思是我需要在初次通话时填写指定的网点？
知道了。现在我的命名路由工作正常。谢谢

【解决方案2】：

这就是我最终用来让它工作的东西：

       this.router.navigate([{ outlets: { detail: ['summary'] } }], 
                            { skipLocationChange: true, relativeTo: this.route });

注意：我的父路径没有''。似乎有许多与 '' 作为父路径相关的 github 问题，但不确定它们是否适用。

【讨论】：

什么是this.route？ ActivatedRoute的私有实例？