CODEWITHSUNDEEP
angularangular2-routing
Tampa
Tampa

Reputation: 78402

angular2 and nested nested routes - how to construct routerLink

I am trying to do a nested nested route.... I have a tab in a tab using dynamic loading of tabs wth angular2 material tab component.

My first nested tab does work. But my second does not.

{ path: 'output',component: OutputComponent, canActivate: [AuthGuard], children: [
        { path: 'details',component: OutputDetailsComponent, canActivate: [AuthGuard], outlet:'output',children: [
            { path: 'distributions',component: OutputDistributionsComponent, canActivate: [AuthGuard], outlet:'data'},
        ]}
       ]
     }

So I can get to http://localhost:4200/#/output/(output:details)

but I cant get to distributions

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

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

So I have:

<router-outlet></router-outlet> -->app.component.html
      <router-outlet name="output"></router-outlet> -- output.componenbt.html
          <router-outlet name="data"></router-outlet> --outpuyt.data.component.html

So in ts I can load the first tab like this:

['/output', {outlets: {'output': ['details']}}]

In the nested nested I tried this:

['/output', {outlets: {'output': [{outlets: {'data': ['distributions']}}]}}]}

What is the proper way to handle this?

This will correctly get me to the route if I paste in the browser: http://localhost:4200/#/output/(output:details/(data:distributions))

I just don't know how to construct using routerLink..

I also tried this to no avail:

  ['/output', {outlets: {'output': ['details/(data:distributions)']}}]

Upvotes: 2

Views: 533

Answers (1)

Shivam Mishra
Shivam Mishra

Reputation: 1856

Actually Nested routes need to be loaded inside the nested outlets

<router-outlet>
    <router-outlet>
        <router-outlet></router-outlet>
    </router-outlet>
</router-outlet>

Better to create root route for every child route

{ 
    path: 'output',
    canActivate: [AuthGuard], 
    children: [
        {
            path: "",
            component: "OutputComponent"
        },
        { 
            path: 'details',
            canActivate: [AuthGuard],
            children: [
                {
                    path: "",
                    component: "OutputDetailsComponent"
                },
                { 
                    path: 'distributions',
                    component: OutputDistributionsComponent, 
                    canActivate: [AuthGuard], outlet:'data'
                 }
             ]
         }
     ]
 }

Upvotes: 1

Related Questions