Angular2：只需更新路线的最后一段

Question

我在我的应用程序中有一条路线，形式为localhost/opportunity/:id/volunteers。我想构建一个routerLink导航到同一级别（即localhost/opportunity/:id/waitlist）的不同页面。按照API 文档中Routerlink概述的选项，我得到的印象是routerLink表单中的 arouterLink="./volunteers" 应该链接到我当前所在的页面。因此，routerLinkActiveforrouterLink="./volunteers"应该表示链接是活动的。但它不会那样做...

相关路线如下所示：

const routes: Routes = [
  {
    path: 'opportunity',
    children: [
      {
        path: ':id',
        children: [
          {
            path: 'volunteers',
            component: VolunteersComponent
          },
          {
            path: 'waitlist',
            component: WaitlistComponent
          },
          {
             etc . . .
          }
        ]
      }
    ]
  }
];

将routerLink="./volunteers"出现导航到localhost/volunteers，这不存在。我也试着在表单链接routerLink="../../volunteers"，routerLink="../volunteers"，routerLink="././volunteers"，等（他们没有任何工作，而不是我认为他们会）。

关于我做错了什么的任何建议？显然，我可以:id手动从链接中提取并插入它（类似于routerLink="['opportunity', extractedId, 'volunteers']"），但这感觉是错误的方式，我不想:id在我的应用程序中手动提取's。我似乎只是做错了什么。我已经搜索了一段时间，但还没有找到这个问题的答案。

小编辑：我还要说这个模块是直接加载到根模块中的。

更新：

当我尝试 a 时routerLink="../"，它显示为活动的localhost/opportunity/:id/volunteersurl，但单击链接会将我带回主页（即localhost/）。我非常确信我的路由器只认为我的应用程序中有一个子级别（即localhost/opportunity/:id/volunteers，它们localhost/calendar似乎都是 的直接子级localhost。虽然localhost/opportunity/:id/volunteers应该是 的直接子级localhost/opportunity/:id。我是否需要通过router的forChild()方法加载路由为了将router其视为子项？换一种方式说，是否有可能因为该模块的所有路由都加载在同一个forChild()块中，所以它们被视为同一级别的子项？

Answer 1

如果当前页面是/opportunity/321/volunteers：

• ./volunteers 去 /opportunity/321/volunteers/volunteers
• volunteers 去 /opportunity/321/volunteers/volunteers
• ../volunteers 去 /opportunity/321/volunteers
• /volunteers 去 /volunteers
• .. 去 /opportunity/321

您正在寻找的语法是 then ../volunteers。

更新

你的配置有问题。

对于单个<router-outlet>，它应该是：

const routes: Routes = [
  {
    path: 'opportunity/:id/volunteers',
    component: VolunteersComponent
  },
  {
    path: 'opportunity/:id/waitlist',
    component: WaitlistComponent
  },
  {
    etc . . .
  }
];

您可以将孩子<router-outlet>用于：

const routes: Routes = [
  {
    path: 'opportunity/:id',
    component: OpportunityComponent
    children: [
      {
        path: 'volunteers',
        component: VolunteersComponent
      },
      {
        path: 'waitlist',
        component: WaitlistComponent
      },
      {
         etc . . .
      }
    ]
  },
  {
    etc . . .
  }
];

然后你需要一个OpportunityComponenthtml 必须包含另一个<router-outlet>

在OpportunityComponent随后进入应用程序<router-outlet>，并VolunteersComponent进入<router-outlet>内部OpportunityComponent。