Problem leaving active link - Angular Routes 2

Question

I’m having trouble adding the class to my active page link.
It works on all pages, but the index is always active. For example: if I am on the application page, the two links are active.

Menu:

<li><a routerLink="/" routerLinkActive="ativo">Página inicial</a></li>
<li><a routerLink="/aplicacao" routerLinkActive="ativo">Aplicações</a></li>

Route:

{ path: '', component: HomeComponent },
{ path: 'aplicacao', component: AplicacaoComponent },

Has anyone had similar problems?

Answer 1

Fala Brother!

Man, I went through exactly this problem when I started programming with Angular. It can be said that when you put Path "/" on any route that is added it will still recognize "/", so it leaves it Active. I arrived at the solution as follows:

Let’s assume your homepage is HOME. In your App-routing-module.ts do this way:

{ path: 'home', component: HomeComponent},
{ path: '', redirectTo: 'home', pathMatch: 'full'}

and in your Menu, direct to "/home" instead of "/":

<a class="nav-link" routerLink="/home">

This way, any other chunk of your code you can set the routerLink to "/" which will automatically redirect to "/home", so it doesn’t affect the other links in your Menu. The only detail is that will always be with the /home, "www.site.com/home" and not "www.site.com", there are people who have touch with this, but it is a very effective solution to the Menu problem.

Answer 2

By default, Angular 2 sets as active any url that at least has the url configured in the routerLinkActive. That is, the "/" URL exists in the "/application". So, Angular 2 puts active on both the first element and the second.

To solve this problem:

In the Docs of the routerLinkActive directive there is another directive where you pass the options of it, this directive is called [routerLinkActiveOptions], in which you can pass as value, an object with the parameter 'Exact' (boolean). Setting this parameter to true will cause the routerLinkActive to only add the class you passed in the "routerLinkActive" in the exact links. Therefore, if your URL is exactly "/", or exactly "/application", the active will be added respectively.

Example in practice

<li><a routerLink="/" routerLinkActive="ativo" [routerLinkActiveOptions]="{exact: true}">Página inicial</a></li>
<li><a routerLink="/aplicacao" routerLinkActive="ativo">Aplicações</a></li>

It is your choice to use the "[routerLinkActiveOptions]" directive in the "/application". You would do this if you want to create another sublink, for example: With the "/application/app1 URL".

Why Angular 2 does this as a standard?

For example, this feature is very useful when you want to create a "Nested menu" (multi-level dropdown menu), with this feature you can apply CSS to all actives in a practical way, in all levels of menus enabled.

Docs:

https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html