Angular 2 Router - 命名插座 [英] Angular 2 Router - Named outlets

问题描述

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

The documentation is not very good, but I am trying to have different router outlets on the same page/route.

我的 app.component.html 中有这个

I have this in my app.component.html

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

我的 app.routes.ts

My 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/路由器，但由于它已被弃用，我正在尝试迁移.是否有可能没有 ;dashboard:dashboard 在 angular/router 中?

So on my startpage (i.e "example.com", not "example.com;dashboard:dashboard") I want to show the Homecomponent in the primary router outlet and my Dashboardcomponent in the Dashboard outlet. That worked with ngrs/router, but since it's deprecated I am trying to migrate. Is it possible without the ;dashboard:dashboard in angular/router?

使用此配置，我被重定向到 404.我也尝试过，但没有成功:

With this configuration I am beeing redirected to 404. I have also tried this with no luck:

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

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

Have anyone managed to get named router outlets working?

更新关于从 ngrx/router 到 angular/router 的迁移说明，您应该可以:

UPDATE Regarding to the migration notes from ngrx/router to angular/router you should be able to have this:

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

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

But when I go to example.com/blog, I get this error in the console:

错误:无法匹配任何路由:'博客'

Error: Cannot match any routes: 'blog'

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

推荐答案

这是我最终用来让它工作的方法:

This is what I ended up using to get it to work:

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

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

Note: I don't have a '' for my parent path. There seem to be a number of github issues related to '' as a parent path but not sure if they apply.

这篇关于Angular 2 Router - 命名插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！