навигация проблема маршрутизации 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> 

Проблема в том, что при нажатии на навигационные ссылки (домой, релизы, участники, контакт) Я получаю URL-адрес: localhost: 3000/home (релизы, участники, контакт) и все в порядке. Но когда я нажимаю на суб-навигационные ссылки (альбомы, расколы, дани) Я получаю URL как: локальный: 3000/# альбомов (#splits, #tributes)

Дело в том, что я хочу, чтобы мой суб -nav ссылки для работы в качестве вкладок, я имею в виду, что хочу получить URL-адрес: localhost: 3000/релизы, даже когда я нажимаю «альбомы», «разбивает», «дань».

Когда я загружаю страницу с моего URL-адреса «релизы», я могу переключаться на вкладки «альбомы», «расщепления», «данности», как описано выше, и в URL-адресе нет символа хэша.

Но когда я возвращаюсь к любой другой первичной навигационной ссылке (домой, членам, контакту) и возвращаюсь к моим ссылкам на суб-навигацию («альбомы», «расколы», «дань»), я не могу их переключать , потому что я получаю URL с хэш и это приводит к главной странице (устанавливается по умолчанию, когда нет такого пути не существует - смотрите ниже код)

Мои app.routes:

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); 

Что делать, чтобы мои суб-навигационные ссылки работали как вкладки и сохраняли URL-адрес: localhost: 3000/релизы

или работать через

локальный: 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 } 
];