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;仪表板：仪表板”）我想在主路由器插座中显示Home组件，在显示板插座中显示我的Dashboard组件。这适用于ngrs / router，但由于它已被弃用，我正在尝试迁移。没有仪表板：角度/路由器中的仪表板吗？

通过这种配置，我正被重定向到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时，我在控制台中收到此错误：

错误：无法匹配任何路线：'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片段（比如＆＃34; wrap＆＃34;我添加了）但是它有效......

和其他人：

{
    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问题作为父路径，但不确定它们是否适用。

Angular 2路由器 - 命名出口

2 个答案: