CODEWITHSUNDEEP
angularangular2-routingangular-cli
Peter
Peter

Reputation: 7804

Angular 2 Child Routes

I used the angular-cli tool to create my routes. It makes a folder with a + in front of it i.e.

I can't work out how to make a child route using the angular-cli tool. That really doesn't matter but I would prefer to adopt an agreed to convention in my application structure for describing a child route.

So what do I do?

Do I put a folder under the parent route like this

Is it better to do this kind of thing

Beyond that I'm a bit confused about routes in general. my understanding is that there's been a deprecated route and a new route. I think I'm using the new system as it has been generated with the angular-cli tool. Anyway I'm nesting multiple levels of child routes. And I was wondering if this looks legit.

@Routes([
  { path: '/', component: DashboardComponent },
  { path: '/document/:id', component: ReaderComponent,
      children: [
          { path: '', redirectTo: 'chapter/0', pathMatch: 'full' },
          { path: 'chapter/:id', component: ChapterComponent,
            children: [
              { path: '', redirectTo: 'para/0', pathMatch: 'full' },
              { path: 'para/:id', component: ParagraphComponent }
           ]}
      ]
  }
])

So http://my-url/document/1 should take me to http://my-url/document/1/chapter/0/para/0 Is this the best way to do this? I like it because it allows deep linking etc. It also appears redirectTo doesn't work.

But I'm a bit new to all this and I'm wanting to keep my application design as 'conventional' as possible

Upvotes: 4

Views: 1394

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657058

It seems you mixed stuff from different incompatible router versions. @Routes() is from an older router version but your routes configuration is for the most recent router version.

See https://angular.io/docs/ts/latest/guide/router.html#!#route-config for how to configure the new router.

Upvotes: 1

Related Questions