8

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

我的 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

4

2 回答 2

3

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

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

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

于 2018-02-13T10:13:04.640 回答
3

试试这个配置：

{
    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)');
于 2016-10-07T13:51:37.910 回答