更新我有下面的菜单,我使用的是角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> 当我导航到/admin/evento/informacoes时,rla.IsActive在两种情况下都是false。类似地,当我导航到/admin/evento/rsvp时,rla.IsActive在这两种情况下都是真正的。
我以为rla.isActive 真就在活动路线上。
这里我的路由配置:
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 { }发布于 2019-07-22 00:53:42
尝试对模板变量使用不同的名称:-
<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">此外,如果只是为了css的目的,我会考虑使用这样的指令,没有模板变量:-
<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>您可以使用css样式:-
.active.icon-info {
}发布于 2019-07-22 00:52:21
这似乎是一个问题,因为您对这两个li都使用了完全相同的引用变量名。
实现这一目标的一个更简单的方法是摆脱#rta,让角的routerLinkActive为您做好它的工作:
<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>https://stackoverflow.com/questions/57138034
复制相似问题