Navigation routing issue Angular2

0
votes

I am building up an Angular2 app and I have there a nav structure like following:

  • home
  • releases
    • albums
    • splits
    • tributes
  • members
  • contact

My 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>

My 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>

The issue is that when I click on nav links (home, releases, members, contact) I get the URL like: localhost:3000/home (releases, members, contact) and it's OK. But when I click on sub-nav links (albums, splits, tributes) I get the URL like: localhost:3000/#albums (#splits, #tributes)

The thing is that I want my sub-nav links to work as Tabs, I mean I want to get the URL like: localhost:3000/releases even when I click on "albums", "splits", "tributes".

When I reload page from my "releases" URL I can switch through the tabs "albums", "splits", "tributes" like described above and there's no hash sign in the URL.

But when I return to any other primary nav link (home, members, contact) and get back to my sub-nav links ("albums", "splits", "tributes") I can't switch through them, because I get the URL with hash and it leads to the main page (it is set by default when no such path exists - watch the code below)

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

What should I do to make my sub-nav links work as Tabs and retain the URL: localhost:3000/releases

or work through

localhost:3000/releases/albums (splits, tributes) ?

1
angulartabsnavigationangular2-routing
Use child routes? – user2677821
that's what I need, post the answer thus I can approve it – Alexandr Belov

1 Answers

0
votes

Your code should use child routing. The route configuration should look as follows:

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