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]
})

网址 / component-c / c1 显示ComponentC1;但是，我尝试了很多组合，如 / component-c（aux：auxPath）/ c1 ， / component-c / c1（ aux：auxPath） 等，仍然无法弄清楚如何显示ComponentAux ......

Answer 1

您应该尝试形成如下所示的网址。

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

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

拥有example的傻瓜。单击详细信息按钮，然后单击admin。管理员在管理员插座中路由。全屏打开以查看URL格式。

网址具有以下语义

子路径由/
如果路径有兄弟姐妹，那么它应该用括号（）
兄弟姐妹由//
出口和路径由以下分隔：

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

另一个question

如何在angular2 router3

1 个答案: