ナビゲーションルーティングの問題Angular2

Question

私はAngular2アプリを構築していると私は持っているが、以下のようなナビゲーション構造：

• ホーム
• リリース
  • アルバム
  • 分割
  • 賛辞
• m残り火
• 接触

マイapp.component：

<header class="header"> 

<nav class="mainMenu mdl-navigation"> 
    <a class="mdl-navigation__link" [routerLink]="['/home']">Home</a> 
    <a class="mdl-navigation__link" [routerLink]="['/releases']">Releases</a> 
    <a class="mdl-navigation__link" [routerLink]="['/members']">Members</a> 
    <a class="mdl-navigation__link" [routerLink]="['/contact']">Contact</a> 
</nav> 

</header> 

<router-outlet></router-outlet> 

<footer class="footer"></footer> 

マイreleases.component：

<div class="releases-list-component"> 

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 

    <div class="mdl-tabs__tab-bar"> 
     <a href="#albums" class="mdl-tabs__tab is-active">Albums</a> 
     <a href="#splits" class="mdl-tabs__tab">Splits</a> 
     <a href="#tributes" class="mdl-tabs__tab">Tributes</a> 
    </div> 

     <div class="mdl-tabs__panel" id="albums"> 
      <div class="release-list-item release_1"></div> 
      <div class="release-list-item release_2"></div> 
      <div class="release-list-item release_3"></div> 
      <div class="release-list-item release_4"></div> 
      <div class="release-list-item release_8"></div> 
     </div> 


     <div class="mdl-tabs__panel" id="splits"> 
      <div class="release-list-item release_6"></div> 
     </div> 

     <div class="mdl-tabs__panel" id="tributes"> 
      <div class="release-list-item release_5"></div> 
      <div class="release-list-item release_7"></div> 
     </div> 

    </div> 

</div> 

問題は、私は（NAVリンクをクリックしたときにということです家、リリース、メンバー、連絡先）私は次のようなURLを取得します： localhost：3000/home（リリース、メンバー、連絡先）とOKです。 しかし、私はサブのナビゲーションリンクをクリックして（アルバム、賛辞を分割）私はのようなURLを取得します：localhostの：3000 /＃アルバム（#splits、#tributes）

事は、私は私のサブが欲しいということですタブとして機能するためには、「アルバム」、「分割」、「賛辞」をクリックしても、 localhost：3000/releasesのようなURLを取得したいと思っています。

「リリース」URLからページをリロードすると、上記のような「アルバム」、「分割」、「トリビュート」のタブを切り替えることができ、URLにハッシュ記号はありません。

他の主なナビゲーションリンク（自宅、メンバー、連絡先）に戻り、サブナビゲーションリンク（「アルバム」、「分割」、「賛辞」）に戻ると、

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { MembersListComponent } from './members/members-list.component'; 
import { ReleasesListComponent } from './releases/releases-list.component'; 
import { ContactComponent } from './contact/contact.component'; 

export const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'members', component: MembersListComponent }, 
    { path: 'releases', component: ReleasesListComponent }, 
    { path: 'contact', component: ContactComponent } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 

：

マイapp.routesを - 私はハッシュでURLを取得し、それがメインページにつながるため、（以下のコードを見て、そのようなパスが存在しない場合、デフォルトで設定されています）サブナビゲーションリンクをタブとして機能させ、URLを保持するにはどうすればよいですか： localhost：3000/releases

又は介して動作

はlocalhost：3000 /解放/アルバム（分割、賛辞） ？

Answer 1

コードでは、子ルーティングを使用する必要があります。ルート設定は次のようになります。

export const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'members', component: MembersListComponent }, 
    { path: 'releases', component: ReleasesListComponent, 
     children: [ 
     { path: 'albums', component: Albums }, 
     { path: 'splits', component: Splits }, 
     { path: 'tributes', component: Tributes } 
     ] 
    }, 
    { path: 'contact', component: ContactComponent } 
];