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

Question

我在我的应用程序中有localhost/opportunity/:id/volunteers的路线。我想构建一个routerLink以导航到同一级别上的不同页面（即localhost/opportunity/:id/waitlist）。按照API documentation for Routerlink中列出的选项，我得到的印象是routerLink="./volunteers"应该链接到我目前所在的同一页面上的routerLink。因此，routerLinkActive为routerLink="./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.O.一段时间，但还没有找到这个问题的答案。

小编辑：让我也说这个模块直接加载到根模块。

UPDATE：

当我尝试routerLink="../"，它显示了localhost/opportunity/:id/volunteers网址为活跃，但点击链接把我带回到主页（即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

你正在寻找的语法然后../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 . . . 
    } 
]; 

然后，您需要一个OpportunityComponent其HTML必须包含另一个<router-outlet>

OpportunityComponent然后进入应用程序<router-outlet>，并且VolunteersComponent进入OpportunityComponent内的<router-outlet>。