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.

I have this in my app.component.html

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

My app.routes.ts

{
    path: '',
    component: HomeComponent,
    outlet: 'primary'
},
{
    path: '',
    component: DashboardComponent,
    outlet: 'dashboard'
},
{
    path: '**',
    redirectTo: '404'
}

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?

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?

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'
}

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

回答1:

Try this configuration:

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

with:

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

I don't know why needs an url fragment (like the "wrap" I added) but it works...

and the others:

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

with:

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

回答2:

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

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

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.

来源：https://stackoverflow.com/questions/39142396/angular-2-router-named-outlets

标签

angular

angular2-routing

ngrx