angular2 同一路由器插座的多级子路由

Question

@angular/router 有没有办法让不同级别的不同路由都填充在该父级的同一路由器出口中？

示例：/a/b/c/d /a/b/c /a/b

全部填充在组件 a 的路由器出口中？

谢谢，

Answer 1

你可以做到，你只需要按照正确的顺序维护路线，

如下所示， a/b/c出现在a/b之前，意味着完全限定的路径应该首先出现。

  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 {
    }

这里是Plunker！