CODEWITHSUNDEEP
javascriptangularroutesangular2-routing
Joe Saad
Joe Saad

Reputation: 1950

angular2 Multiple level children routes for same router-outlet

@angular/router Is there a way to have different routes with different levels all populating int he same router-outlet of that parent?

example: /a/b/c/d /a/b/c /a/b

all populating in the router-outlet of component a ?

Thanks,

Upvotes: 1

Views: 1342

Answers (1)

Madhu Ranjan
Madhu Ranjan

Reputation: 17944

you can do it , you just have to maintain the routes in correct order,

Like below see a/b/c comes before a/b, means fully qualified path should come first.

  export const routes: RouterConfig = [
    { path: 'a/b/c', component: ABC },
    { path: 'a/b', component: AB }
  ];

  @Component({
    selector: 'my-app',
    template: `
    <h1 class="title">Component Router</h1>
    <nav>
      <a routerLink="/a/b" routerLinkActive="active">a/b</a>
      <a routerLink="/a/b/c" routerLinkActive="active">a/b/c</a>
    </nav>
    <router-outlet></router-outlet>
   `,
   directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent {
  }

  @Component({
    selector: 'my-abc',
    template: `
      <h1>a-b-c</h1>
    `
   })
   export class ABC {
   }

   @Component({
      selector: 'my-ab',
      template: `
      <h1>a-b</h1>
      `
    })
    export class AB {
    }

Here is the Plunker!

Upvotes: 1

Related Questions