angular - 子路由上的 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 当在 /singup 所有 rla.isActive == true

尝试使用和不使用 exact: true

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>