如何在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.

带有示例的柱塞.单击详细信息按钮，然后进行管理.管理员在管理员插座中路由.全屏打开以查看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屋！