Angular：命名路由器出口上的相对导航答案

【问题标题】：Angular : Relative navigation on a named router outletAngular：命名路由器出口上的相对导航
【发布时间】：2017-06-13 14:36:10
【问题描述】：

我有以下 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。

我该如何做这个导航？

【问题讨论】：

遇到了同样的问题，请问您找到解决办法了吗？
不，我没有成功实现相对导航。我通过手动构建 URL 并使用 navigateByUrl 路由器方法导航到它来解决它。

标签： angular router-outlet angular-router

【解决方案1】：

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

您可以使用{ relativeTo: this.activatedRoute.parent }，一切都像魅力一样。

【讨论】：