如何在angular2 router3中为子路由指定辅助组件 [英] How to specify auxiliary component for child route in angular2 router3

问题描述

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

I am using the new route3 and would like to know what is the URL syntax to specify a auxiliary component for a child route.

我有以下子路由定义:

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

ComponentC 的模板就像

And the template for ComponentC is like

@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 显示...

URL /component-c/c1 displays ComponentC1; however, i've tried many combinations like /component-c(aux:auxPath)/c1, /component-c/c1(aux:auxPath), etc. and still can't figure out how to get ComponentAux to be displayed...

推荐答案

您应该尝试像下面那样形成您的 URL.

You should try forming your URL like below.

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

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

As per my last investigation current router version has some issues in navigating to aux outlet using routerLink and navigate method. You should build the full URL and use navigateByUrl.

Plunker 与 示例.单击详细信息按钮，然后单击管理员.管理员在管理出口中路由.以全屏方式打开以查看 URL 格式.

Plunker with example. Click on detail button and then admin. Admin is routed in admin outlet. Open in full screen to see URL formation.

URL 具有以下语义

1. 子路径由/分隔
2. 如果一条路径有兄弟姐妹，那么它应该用括号 () 包围起来
3. 兄弟姐妹之间用//分隔

4. 出口和路径用 :

1. Child path is separated by /
2. If a path has siblings then it should be surrounded with parenthesis ()
3. Sibling are separated by //

4. Outlet and path is separated by :

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

另一个问题

这篇关于如何在angular2 router3中为子路由指定辅助组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！