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>

我的 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（发布，成员，联系人）并且没关系。但是当我点击子导航链接（专辑，分割，致敬）时，我得到的网址如下： localhost：3000 /＃album（#splits，＃attributess）

问题是我希望我的子导航链接作为Tabs工作，我的意思是我想得到如下的URL： localhost：3000 / releases 即使我点击＆＃34;相册＆＃34;，＆＃34;分割＆＃34;，＆＃34;致敬＆＃34;。

当我从我的＆＃34;发布＆＃34;重新加载页面时网址我可以切换标签＆＃34;相册＆＃34;，＆＃34;分割＆＃34;，＆＃34;致敬＆＃34;如上所述，URL中没有哈希符号。

但是当我返回任何其他主要导航链接（家庭，成员，联系人）并返回我的子导航链接（＆＃34;专辑＆＃34;，＆＃34;分裂＆＃34;，＆＃ 34;致敬＆＃34;）我无法切换它们，因为我得到带有哈希的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

或通过

工作

localhost：3000 / releases / albums（splits，tributes） ？

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

导航路由问题Angular2

1 个答案: