Angular：指定路由器插座上的相对导航

Question

我有以下 Angular Route 配置

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。

我怎样才能进行此导航？

Answer 1

我知道这是一个老问题，但是我在寻找答案时找到了解决方法。

您可以使用{ relativeTo: this.activatedRoute.parent }，所有操作都像一个超级按钮。