子路由中的RouterLinkActive全部为false。

Question

我有以下子路由：

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

导航到/login或/singup都可以正常工作（正确的组件已加载）。

这是从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>

在/login时，所有rla.isActive == false；在/signup时，所有rla.isActive == true。

尝试使用和不使用exact: true

- Victor Aurélio

Answer 1

试试这样：

<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>

- Chandru

---

当登录时，所有值都为false，当注册时所有值都为true。 - Victor Aurélio

在我的情况下运行良好。 - Ethan.R

Answer 2

找到了问题。

是因为我将两个routerLinkActive都导出为相同的变量名，导致了这种奇怪的行为。

<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>

解决了问题。

- Victor Aurélio