如何在angular2 router3中为子路由指定辅助组件

Question

我正在使用新的 route3，想知道为子路由指定辅助组件的 URL 语法是什么。

我有以下子路由定义：

const router: RouterConfig = [
  {
    path: 'component-c', component: ComponentC, children: [
      { path: 'auxPath', component: ComponentAux, outlet: 'aux'},
      { path: 'c1', component: ComponentC1 }
    ]
  }
];

ComponentC 的模板是这样的

@Component({
  selector: 'component-c',
  template: `
    <div>Child Route Component</div>
    <router-outlet></router-outlet>
    <router-outlet name="aux"></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})

URL /component-c/c1显示ComponentC1；然而，我尝试了很多组合，比如 /component-c(aux:auxPath)/c1, /component-c/c1(aux:auxPath), 等等，仍然无法弄清楚如何让 ComponentAux 显示...

Answer 1

您应该尝试像下面这样组成您的 URL。

this.router.navigateByUrl('/component-c/(c1//aux:auxPath)

根据我上次的调查，当前的路由器版本在使用 routerLink 和 navigate 方法导航到辅助插座时存在一些问题。您应该构建完整的 URL 并使用 navigateByUrl.

与 example 的 Plunker。单击详细信息按钮，然后单击管理。 Admin 在 admin outlet 中路由。全屏打开可以看到URL队形。

URL 具有以下语义

子路径由 / 分隔
如果一个路径有兄弟姐妹，那么它应该用括号 () 括起来
兄弟姐妹被//隔开
出口和路径分隔：

Parent/child/(gchild1//outletname:gchild2)

另一个这样

如何在angular2 router3中为子路由指定辅助组件

How to specify auxiliary component for child route in angular2 router3

angular2-routing

angular2-router3

angular