导航路由问题Angular2答案

【问题标题】：Navigation routing issue Angular2导航路由问题Angular2
【发布时间】：2016-12-02 19:48:14
【问题描述】：

我正在构建一个 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>

我的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：localhost:3000/#albums (#splits, #tributes)

问题是我希望我的子导航链接作为选项卡工作，我的意思是我想获得如下 URL： localhost:3000/releases 即使我点击“专辑”、“拆分”、“致敬”。

当我从我的“发布”网址重新加载页面时，我可以像上面描述的那样在“专辑”、“拆分”、“致敬”标签之间切换，并且网址中没有井号。

但是当我返回任何其他主要导航链接（主页、成员、联系人）并返回我的子导航链接（“专辑”、“拆分”、“致敬”）时，我无法切换它们，因为我得到了带有哈希的 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/releases

或解决

localhost:3000/releases/albums（拆分，致敬） ?

【问题讨论】：

使用子路由？
这就是我需要的，发布答案以便我批准它

标签： angular tabs navigation angular2-routing

【解决方案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 }
];

【讨论】：