导航路线问题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> 

的问题是，当我点击导航链接（家，发布，会员，联系人）我得到的网址如： localhost：3000/home（发布，会员，联系人）并且没关系。 但是当我点击子导航链接（相册，分裂，贡品），我得到的网址，如：本地主机：3000 /＃专辑（#splits，#tributes）

的事情是，我希望我的子-nav链接工作作为制表符，我的意思是我想要得到的URL： localhost：3000/releases即使当我点击“专辑”，“分裂”，“贡品”。

当我从我的“发布”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); 

我应该怎样做才能使我的子导航链接作为制表符工作，并保留网址： localhost：3000/releases

，或者通过工作

本地主机：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 } 
];