我有以下角度路由配置
const appRoutes: Routes = [
{
path: '',
component: DirectoryComponent
},
{
path: 'manage/:type/:id',
component: ManageComponent,
outlet: 'manage',
children: [
{
path: '',
component: PreviewComponent,
pathMatch: 'full'
},
{
path: 'add/:elementType',
component: EditComponent,
}
]
}
];
ManageComponent
是一个沙盒组件,其中将呈现PreviewComponent
和EditComponent
。
用例将用户重定向到与预览组件匹配http://localhost:4200/#/(manage:manage/bar/12762)
。这里一切都很好。
从PreviewComponent
和用户单击按钮时,我想对EditComponent
进行相对导航,以便在导航完成后进行http://localhost:4200/#/(manage:manage/bar/12762/add/foo)
我试过了
this.router.navigate([{outlets: {manage: ['add', 'foo']}}],{relativeTo: this.route});
和
this.router.navigate([{outlets: {manage: ['add', 'foo']}}]);
但每次,用户都会被重定向到http://localhost:4200/#/add/foo
。
我怎样才能进行这个导航?
这是一个古老的问题,但是在寻找答案时我找到了解决方案。
您可以使用{ relativeTo: this.activatedRoute.parent }
,一切都像魅力一样工作。