routerLink to load a page of a nested parent->child->child

1
votes

I am trying to use routerLink to load a page of a parent->child->child router outlet with two named outlets.

 http://localhost:4200/#/output/(output:details/(data:distributions))

1) If I paste the URL into the browser it works

2) If I use the below it works:

this.router.navigateByUrl('output/(output:details/(data:distributions))');

If I try to use router link in an angular2 tab component IT DOES NOT WORK

[routerLink]="['/output', {outlets: {'output': ['details'],'data':['distributions']}}]"

 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'output'

My other links that only have a parent-> child do work:

 [routerLink]="['/output', {outlets: {'output': ['scenarios']}}]"

I have to assume I am formatting the routerLink incorrect for the parent->child->child.

1
angularangular2-routing

1 Answers

1
votes

You can do it like this:

routerLink = [
  '/output', {outlets: {'output': ['details', {outlets: {'data': ['distributions']}}]}}
]);