RouterLinkActive “isActive” always true

Question

[Update] I have the follow menu and I'm using Angular 7

<div class="row">
    <nav class="nav-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <ul class="adminnoivossite">
            <li class="">
                <a [routerLink]="['/admin/evento/informacoes']" [routerLinkActive] #rla="routerLinkActive" [routerLinkActiveOptions]="{exact: true}" alt="Informações" title="Informações">
                    <div class="icon icon-info" [class.active]="rla.isActive"></div>
                    <label>Informações</label>
                </a>
            </li>
            <li class="">
                <a [routerLink]="['/admin/evento/rsvp']" [routerLinkActive] #rla="routerLinkActive" [routerLinkActiveOptions]="{exact: true}" alt="RSVP" title="RSVP">
                    <div class="icon icon-rsvp" [class.active]="rla.isActive"></div>
                    <label>RSVP</label>
                </a>
            </li>
        </ul>
    </nav>
</div>  

When I navigate to /admin/evento/informacoes rla.IsActive is false in both cases. Similarly, when I navigate to /admin/evento/rsvp rla.IsActive is true in both cases.

I expected rla.isActive true just on active route.

---

Here my Routes configurations:

app-routing.modules.ts

const routes: Routes = [
  ...,
  {path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

admin-routing.module.ts

const routes: Routes = [
  ...,
  {path: 'evento', loadChildren: './evento/evento.module#EventoModule' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

evento-routing.module.ts

const routes: Routes = [
    {path: 'informacoes', component: EventoInformacoesComponent, canActivate: [UsuarioGuard]}, 
    {path: 'rsvp', component: EventoRsvpComponent, canActivate: [UsuarioGuard]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EventoRoutingModule { }

Answer 1

This seems to be an issue with the fact that you've used the exact same reference variable name for the both of those li s.

A simpler way to achieve this is to get rid of the #rta and simply let Angular's routerLinkActive do its job for you:

<div class="row">
  <nav class="nav-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <ul class="adminnoivossite">
      <li class="" routerLinkActive="active">
        <a 
          routerLink="/admin/evento/informacoes" 
          alt="Informações" title="Informações">
          <div class="icon icon-info"></div>
          <label>Informações</label>
        </a>
      </li>
      <li class="">
        <a 
          routerLink="/admin/evento/rsvp" 
          alt="RSVP" 
          title="RSVP">
          <div class="icon icon-rsvp"></div>
          <label>RSVP</label>
        </a>
      </li>
    </ul>
  </nav>
</div>

Answer 2

Try using different names for template variables :-

 <a [routerLink]="['/admin/evento/informacoes']" [routerLinkActive] #rla1="routerLinkActive" [routerLinkActiveOptions]="{exact: true}" alt="Informações" title="Informações">
 <a [routerLink]="['/admin/evento/rsvp']" [routerLinkActive] #rla2="routerLinkActive" [routerLinkActiveOptions]="{exact: true}" alt="RSVP" title="RSVP">

Also if only for css purposes I would think of using directive like this without template variable :-

 <a [routerLink]="['/admin/evento/informacoes']" routerLinkActive ="active" [routerLinkActiveOptions]="{exact: true}" alt="Informações" title="Informações">
                    <div class="icon icon-info" ></div>
                    <label>Informações</label>
  </a>

and you can style css :-

.active.icon-info {
}