CODEWITHSUNDEEP
angularangular2-routing
APalmer
APalmer

Reputation: 979

Angular 2 Auxiliary routing between siblings with routerLink

Here's what My Routes look like. It should be noted that all the default/blank routes work correctly when the page loads.

const routeConfig = [
  {
    path:'', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'wtf', outlet:'right-panel', component:WTFComponent }
    ]
   }
];

I have a link located in the ContractsComponent which has a routerLink that looks like this: 

[routerLink]="[{outlets: {'right-panel':['wtf']}}]"

I would like that to make the right-panel outlet show the WTFComponent. But all I get is an error saying it cannot match any routes.

What have I missed? or does routerLink just not work with auxiliary sibling routes?

Upvotes: 1

Views: 1451

Answers (2)

lemmingworks
lemmingworks

Reputation: 179

I found that specifying the current (primary) route as the first part of the array passed into [routerLink], plus the options array in which you specify the outlet config allows transition to a sibling route in the same named outlet.

e.g. using the OP's route config:

const routeConfig = [
  {
    path:'', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'wtf', outlet:'right-panel', component:WTFComponent }
    ]
   }
];

and assuming that the the 'right-panel' outlet is currently displaying the PlanetComponent:

[routerLink]="[ '', { outlets: { 'right-panel': 'wtf' } } ]"

The empty string first argument of the array means 'the primary route should stay the same', while the sibling route in the named outlet is changed by the outlets config in the options object.

Upvotes: 1

APalmer
APalmer

Reputation: 979

After much combat, I have discovered that this is what works in my particular situation:

[routerLink]="{outlets: {'right-panel':'wtf'}}"

The functioning programmatic version is this: 

this.router.navigateByUrl('home/(contracts//right-panel:wtf)');

And my routeConfig looks like this now: 

const routeConfig = [
  { path:'', redirectTo: 'home', pathMatch: 'full'},
  {
    path:'home', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'wtf', outlet:'right-panel', component:ContractComponent }
    ]
   }
];

Upvotes: 4

Related Questions