Angular 2 Router - change just named outlet

1
votes

I have a primary router outlet and a named outlet. The primary outlet contains a child router outlet. When I try to change just the named outlet, it fails - I get routed to the default primary route and nothing happens in the named outlet.

AppRouter (primary/AppModule):

{ path: 'dashboard', component: DashboardComponent },
{ path: 'person/:id', component: PersonProfileComponent }
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' }

Child Router (separate module) :

{
        path: 'person/:id',
        component: PersonProfileComponent,
        children: [
            { path: 'people', component: PersonPeopleComponent }, 
            {
                path:'person-edit',
                component: PersonEditPanelComponent,
                outlet:'taskPane'
            },
}

From the PersonPeopleComponent (url of #/person/8/people - which matches person/:id in the primary outlet and people in the child outlet), I have the following RouterLink:

<a [routerLink]="[{outlets:{taskPane : ['person-edit']} }]">Click Me!</a>

where taskPane is the named outlet.

What I would expect to happen is that the PersonEditPanelComponent would show in the taskPane named outlet, and the PersonProfileComponent and the PersonPeopleComponent would remain unchanged in the primary and child outlets. Instead, what I see is the Dashboard route (my fallback route) gets loaded into the primary outlet and the taskPane outlet is empty. No error is recorded in the console.

The href on my link ends up as something like #/person/8/(people//taskPane:person-edit) which doesn't work (I've tried many different permutations on the router link so that is an example of just one invalid URL). The URL needs to be #/person/8/people(taskPane:person-edit) which does work (I tested it manually) but I can't figure out how to set the RouterLink to generate that URL.

I think that the routes are configured correctly because the URL works when I hardcode it, which means then that the problem is in the RouterLink.

Any clues as to what I'm doing wrong?

Thanks.

2
angularangular2-routingangular-auxiliary-routes

2 Answers

4
votes

Got it. Adding an empty string for the relative part of the routerLink worked:

<a [routerLink]="['', {outlets: {taskPane: 'person-edit'} }]">Click Me!</a>

                  ^^
0
votes

Path for the primary outlet has to be set in [routerLink] directive. It's pretty easy to do with Router injected into the component:

@Component({
  template: `<a [routerLink]="[router.url, {outlets: {taskPane: ['person-edit']} }]">Click Me!</a>`
})
export class YourComponent {
  constructor(public router: Router) {}
}

If it still does not work, then I'd try to pass parameter for named outlet as a string in:

{outlets: {taskPane: 'person-edit'}}