How to use child routes in Angular 2

Question

Angular 2 version: 2.0.0-alpha.44

I\'ve been trying to do routing in Angular 2. Though i was able to do the normal routing done, i am facing some is

Answer 1

You just need to import the child component in the routerLink then your code is working fine. For example:

<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>

Here is the working plnkur of your code. Plunker Code

For more info about this routing see this issue on github here

Update to Angular 2 beta

As of Angular 2 beta some changes are here:

• router-link has been changed to routerLink

• You can also use useAsDefault : true instead of providing child at the time of routerLink like this -

  {path: '/blabla', components: ABC , name : ABC, useAsDefault: true}

Answer 2

Angular4 child Routing -

Let me first define the route configuration, each route can have a property called children where you can define the child routes of this route.

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'find', redirectTo: 'search'},
  {path: 'home', component: HomeComponent},
  {path: 'search', component: SearchComponent},
  {
  path: 'artist/:artistId',
  component: ArtistComponent,
  children: [
  {path: '', redirectTo: 'tracks'}, ①
  {path: 'tracks', component: ArtistTrackListComponent}, ②
  {path: 'albums', component: ArtistAlbumListComponent}, ③
  ]
  },
  {path: '**', component: HomeComponent}
];

1. If a user navigates to say /artist/1234 it will redirect to /artist/1234/tracks .
2. This route matches a URL like /artist/1234/tracks.
3. This route matches a URL like /artist/1234/albums.

<h1>Artist</h1>
<p>
  <a [routerLink]="['./tracks']">Tracks</a> |
  <a [routerLink]="['./albums']">Albums</a>
</p>
<router-outlet></router-outlet>