[英]RouterLinkActive on children routes all false
我有以下儿童路线:
{ 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
试试这样:
<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>
发现了问题。
这是因为我导出了两个rounterLinkActive,它们具有相同的变量名,这导致了这种我们的行为。
<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>
解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.