Angular2：ルートの最後のセグメントを更新するだけです

Question

私のアプリではlocalhost/opportunity/:id/volunteersという形でルートがあります。 routerLinkを作成して、同じレベルの別のページ（つまり、localhost/opportunity/:id/waitlist）に移動したいと考えています。 API documentation for Routerlinkに記載されているオプションに続いて、routerLinkという形式のrouterLink="./volunteers"はと同じページにリンクする必要があります。したがって、の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 URLのアクティブとして示しているが、リンクをクリックすると、ホームページ（すなわちlocalhost/）に私を取り戻します。私のルータは自分のアプリ内に1つの子レベルしかないと思っていると確信しています（つまり、localhost/opportunity/:id/volunteersとlocalhost/calendarは両方とも直接子のlocalhostと思われます）。localhost/opportunity/:id/volunteersはlocalhost/opportunity/:idの直接の子でなければなりません。他の方法では、このモジュールのルートのすべてが同じforChild()ブロックにロードされているため、それらは同じレベルとして扱われている可能性がありますか？子供

Answer 1

現在のページが/opportunity/321/volunteersの場合：？

• ./volunteers/opportunity/321/volunteers/volunteers
• volunteersに行くには/opportunity/321/volunteers/volunteers
• ../volunteersに行く/opportunity/321/volunteers
• /volunteersに行く/volunteers
• ..に行くあなたが探している構文は、その後../volunteersある/opportunity/321

に行きます。

更新

あなたの設定が間違っています。単一<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 . . . 
    } 
]; 

その後、そのHTML別の<router-outlet>

が含まれている必要がありOpportunityComponentが必要OpportunityComponentは、<router-outlet>のアプリに入ります。 VolunteersComponentはOpportunityComponentの中の<router-outlet>に入ります。