Angular 2路由器——命名为outlets

Question

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

在我的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有效，但由于它已被弃用，我正在尝试迁移。在angular/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时，我在控制台中得到这个错误:

错误:Cannot match any routes: 'blog'

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

Answer 1

试试这个配置:

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

:

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

我不知道为什么需要一个url片段(像"wrap"我添加)，但它的工作…

和其他:

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

:

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

Answer 2

这是我最终使用它来工作的:

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

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