我正在使用新的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 /组件-c/c1显示组件C1;但是,我尝试过很多组合,例如/组件-c(aux:auxPath)/c1, /组件-c/c1(aux:auxPath)等等,但仍然不知道如何显示 ComponentAux...
您应该尝试像下面这样形成您的 URL。
this.router.navigateByUrl('/component-c/(c1//aux:auxPath)
根据我上次的调查,当前的路由器版本在使用导航到辅助插座时存在一些问题routerLink
and navigate
方法。您应该构建完整的 URL 并使用navigateByUrl
.
笨蛋与example https://plnkr.co/edit/Kn4yBi5oytNVcFvUvGLR?p=preview。单击详细信息按钮,然后单击管理。管理员在管理出口中路由。全屏打开以查看 URL 构成。
URL 具有以下语义
- 子路径由 / 分隔
- 如果路径有兄弟路径,那么它应该用括号 () 括起来
- 兄弟姐妹之间用 // 分隔
-
出口和路径由 分隔:
Parent/child/(gchild1//outletname:gchild2)
另一个如此question https://stackoverflow.com/a/38365072/652850
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)