RouterLinkActive sur les enfants toutes les fausses routes

Question

I AVONS les itinéraires enfants suivants:

{ path: '', component: LoginSingupComponent, 
    children: [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'singup', component: SingupComponent }, 
    ] 
}, 

Navigation vers /login ou /singup fonctionne ok (correcte des composants est chargé).

C'est un extrait de LoginSingupComponent

<nav md-tab-nav-bar class="mb-1"> 
    <a md-tab-link routerLink="/login" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Entrar {{rla.isActive}}</a> 
    <a md-tab-link routerLink="/singup" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Criar uma conta{{rla.isActive}}</a> 
</nav> 

Lorsque sur /login tous rla.isActive == false quand sur /singup tous rla.isActive == true

Essayé avec et sans exact: true

Answer 1

a trouvé le problème. C'est parce que j'exportais les deux rounterLinkActive avec le même nom de variable qui provoque ce comportement weired.

<a md-tab-link routerLink="/auth/login" routerLinkActive [active]="rlal.isActive" #rlal="routerLinkActive">Entrar {{rlal.isActive}}</a> 
<a md-tab-link routerLink="/auth/singup" routerLinkActive [active]="rlas.isActive" #rlas="routerLinkActive">Criar uma conta{{rlas.isActive}}</a> 

Résout le problème.

Answer 2

Essayez comme ceci:

<nav md-tab-nav-bar class="mb-1"> 
    <a md-tab-link [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a> 
    <a md-tab-link [routerLink]="['/login']" routerLinkActive="active">Login</a> 
    <a md-tab-link [routerLink]="['/singup']" routerLinkActive="active">Signup</a> 
</nav>