CODEWITHSUNDEEP
angularangular2-routing
kunerd
kunerd

Reputation: 1076

Nested routes and multiple components

I try to create a view in Angular 2 that should look like this:

releases-component
-----------------    -------------    --------------
| releases-list |    | rcs-list  |    | binaries-  |
| * release1    |    | * rc1     |    | list       |
|   release2    |    |   rc2     |    |            |
-----------------    -------------    --------------

where each of the three parts is a component, whereas releases and rcs contains a list with links that should map to the following routes:

releases-component.html

<router-outlet></router-outlet>
<router-outlet name="rcs"></router-outlet>
<router-outlet name="binaries"></router-outlet>

routes

{
  path: 'releases',
  component: ReleasesComponent,
  children: [
    { path: '', component: ReleasesListComponent },
    {
      path: ':id/rcs',
      outlet: 'rcs',
      component: CandidateComponent,
      children: [
        { path: ':no/binaries', outlet: 'binaries', component: BinariesComponent }
      ]
    },
  ]
}

releases links - to show list of rcs

{outlets: {rcs: release.id + '/rcs'}}

rcs links - to show list of binaries

{outlets: {binaries: rc.id + '/binaries'}}

I have tried all different kind of route and link definitions, but I can't get it to work. With this current solution the binaries simply do not get displayed and after clicking another rcs link I get the following error:

TypeError: Cannot read property 'component' of null

Upvotes: 1

Views: 614

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39482

This might sound ridiculously complex. But it's fairly simple. I suggest you have your routing like this:

{ path: 'releases', component: ReleaseListComponent, children: [
    { path: '', component: NotSelectedComponent },
    { path: ':id', component: ReleaseDetailsComponent, children: [
        { path: '', component: NotSelectedComponent },
        { path: 'rcs', component: RcsListComponent, children: [
            { path: '', component: NotSelectedComponent },
            { path: ':id', component: RcsDetailsComponent, children: [
                { path: '', component: NotSelectedComponent },
                { path: 'binaries', component: BinaryListComponent }
            ] }
        ] }
    ] }
] }

Now for each path that has a component with children on it, you'll have to place a <router-outlet></router-outlet>. And then it will figure out the rest on it's own.

So, by that I mean that following components will have a router-outlet inside their templates:

  • ReleaseListComponent
  • ReleaseDetailsComponent
  • RcsListComponent
  • RcsDetailsComponent

I wish I could style this to show you on the screen. But that's too much of effort and I would literally be spoon-feeding you in that case.

But here's how it will look on the UI:

enter image description here

Upvotes: 1

Related Questions