导航路由问题Angular2

Question

我正在构建一个Angular2应用

• 主页
• 发布
  • 专辑
  • 拆分
  • 致敬
• 成员
• 联系人

我的 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>

我的 earseas.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（释放，会员，联系人），没关系。但是，当我单击子-NAV链接（专辑，拆分，致敬）时，我会得到url，例如： localhost：3000/＃专辑（#splits，＃tributes）

问题是我希望我的子-NAV链接可作为标签工作，我的意思是我想获得url： localhost：3000/发行，即使我单击"专辑"，"拆分"，" Tributes"。

当我从"发行" URL中重新加载页面时，我可以通过上面描述的"专辑"，"拆分"，"折断"切换，如上所述，在URL中没有哈希符号。

但是，当我返回任何其他主var链接（主页，会员，联系人）时，然后返回我的子-NAV链接（"专辑"，"拆分"，" Tributes"），我无法切换它们，因为我使用哈希（Hash）获取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);

我该怎么做才能使我的子-NAV链接作为选项卡并保留URL： localhost：3000/发行

或通过

工作

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 }
];