How to multiple URLs on same router link

Question

I'm working on a little test project in angular and I want to include a side navigation using angular router outlet. I want there to be two links:

<a class="nav-link text-white" [routerLink]='["/link/to/one"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 1</a>
<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a>

There are a few sub pages that can be navigated to from one of the components. But they don't need to show up as a router link.

So the structure of my site can be for example:

|-Comopnent 1
|
|-Component 2
   |- Component 3 
   |- Component 4

So I want the user to be able to navigate to Component2 via the router links. From this component the user can be redirected via code to component 3 and 4. But I dont want them to have extra router links, I want that there is still component2 highlighted in the navigation menu.

In my app.module.ts I declared the routes pretty basically:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2 },
])

How can I call Component3 & 4 from Component2, and let the router highlight Component2 in the navigation bar?

Regards

SiddAjmera · Accepted Answer · 2019-07-06 02:43:37Z

6

You can do that by simply setting Component3 and Component4 to show on Child Routes.

So your Router Config will be something like:

[
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent, children: [
      { path: 'three', component: ThreeComponent },
      { path: 'four', component: FourComponent },
    ] 
  },
]

And then the routerLinkActive will take care of the rest.

In the active CSS Class, I've set the color to red. So whichever link is active, it will get the red color.

You can also test it out by manually typing /two/three or /two/four in the address bar.

Here's a Working Sample StackBlitz for your ref.

answered Jul 6, 2019 at 2:43

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kuroneko0441 · Accepted Answer · 2019-07-06 02:52:01Z

TL; DR

Configure your Component 3 and Component 4 route as children of Component2, and then remove your [routerLinkActiveOptions]="{ exact: true }" from your routerlink linked to Component2.

Description

I think you already know the answer, the key is routerLinkActiveOptions.

First, configure your route like this:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2, children: [
      { path: '/component3', component: Component3 },
      { path: '/component4', component: Component4 },
    ],
  },
])

Then, change your routerLinkActiveOptions

Before:

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a

After:

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: false }">Component 2</a

The difference is [routerLinkActiveOptions]="{ exact: false }".

However, the default value of routerLinkActiveOptions.exact is false, so it is same with just removing the routerLinkActiveOptions.

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink">Component 2</a

Collectives™ on Stack Overflow

How to multiple URLs on same router link

2 Answers 2

Comments

TL; DR

Description

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

TL; DR

Description

Comments

Your Answer

Sign up or log in

Post as a guest

Related