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>。