Use routerLinkActive without using routerLink

Question

Use routerLinkActive without using routerLink

Navigation

#1 by (1 votes)

1

Good morning, everyone. I tell you my problem.

I had to modify my HTML to remove the routerLink="" and now do that logic in the controller with router.navigate[()]

So the html is something like this:

<ul class="nav">
      <li routerLinkActive="active" (click)="changeUrl('0')">
          <a>
             <span>{{menu[0].title}}</span>
          </a>
      </li>
      <li routerLinkActive="active" (click)="changeUrl('1')">
          <a>
             <span>{{menu[1].title}}</span>
          </a>
     </li>

And in the component.ts you simply control in the method changeUrl(orden: number) that shows the user a confirmation message before doing the router.navigate[()] to redirect you if you accept.

The problem is that with these changes the routerLink="active" has stopped working.

Does anyone know how I can solve it?

angularjs-2.0 ngroute

asked by Findelias 25.07.2017 в 14:43

source

1 answer

help with error with Visual Basic Error connecting to an Azure SQL database from a Vb.NET Winforms application

score 1 · Accepted Answer

I self-answer.

The solution I found at the end is to directly remove the LinkActive router and set the "active" class with a [class.active]="menu [0] .active"

<ul class="nav">
      <li [class.active]="menu[0].active" (click)="changeUrl('0')">
          <a>
             <span>{{menu[0].title}}</span>
          </a>
      </li>
      <li [class.active]="menu[0].active"  (click)="changeUrl('1')">
          <a>
             <span>{{menu[1].title}}</span>
          </a>
     </li>

As the menu list is a list of RouteInfo I have added the active value from the component with the instruction:

menuItem['active'] = true;