angular - 如何在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 方法导航到辅助 socket 时存在一些问题。您应该构建完整的 URL 并使用 navigateByUrl。

笨蛋与 example 。单击详细信息按钮，然后单击管理。管理员在管理导出中路由。全屏打开以查看 URL 构成。

URL 具有以下语义

1. 子路径用/分隔
2. 如果路径有兄弟路径，那么应该用括号 () 括起来
3. sibling 之间用//分隔

4. socket 和路径由 : 分隔

   父/子/(gchild1//outletname:gchild2)

另一个这样question