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")上，我想在主路由器出口中显示Home组件，在Dashboard出口中显示Dashboard组件.这与ngrs/router一起使用，但是由于已弃用，因此我正尝试迁移.是否可以在angular/router中不使用; dashboard:dashboard?

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屋！