如何根据所调用的URL动态定位<router-outlet>？

Question

我有一个复杂的界面,我在页面(这里是关于页面)中有一个动态项目列表(想象一个手风琴小部件),当我调用这个url时:

/about/item/1

它"路由"到一个手风琴项目并加载点击列表项目中的内容(手风琴的一个项目).

具体来说,我想要做的是:

@Component({
    selector: 'app-about',
    template: `
      <ul>
          // dynamic list
          <li>
              <a [routerLink]="['/about/item', 1]">Item 1</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/1
          </li>
          <li>
              <a [routerLink]="['/about/item', 2]">Item 2</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/2
          </li>
      </ul>         
    `
})
export class AboutComponent { }

我正在使用angular:2.0.0-rc.4,angular/router:3.0.0-beta.2

这似乎不是正确的做法.我怎么能这样做"有角度的方式"？

非常感谢

Answer 1

您可以给路由器出口名称并定义组件应添加到的出口的路由名称

<router-outlet name="a"></router-outlet>
<router-outlet name="b"></router-outlet>

{ path: 'a', component: A, outlet: 'a'}
{ path: 'b', component: B, outlet: 'b'}

也可以看看

• https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html
• https://angular.io/docs/ts/latest/guide/router.html