Question

我有一个复杂的界面，我在页面中有一个动态项目列表（想象一个手风琴小工具）（这里是关于页面），当我调用这个网址时：

/about/item/1

它＆＃34;路线＆＃34;到一个手风琴项目并加载点击列表项目中的内容（手风琴的一个项目）。

具体来说，我想做的是：

@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

它似乎不是正确的做法。我怎么能这样做＆＃34;棱角分明的方式＆＃34; ？

非常感谢

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

另见

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

1 个答案: