首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >RouterLinkActive "isActive“总是真实的

RouterLinkActive "isActive“总是真实的
EN

Stack Overflow用户
提问于 2019-07-22 00:40:56
回答 2查看 1.7K关注 0票数 0

更新我有下面的菜单,我使用的是角7

代码语言:javascript
复制
<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

代码语言:javascript
复制
const routes: Routes = [
  ...,
  {path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

admin-routing.module.ts

代码语言:javascript
复制
const routes: Routes = [
  ...,
  {path: 'evento', loadChildren: './evento/evento.module#EventoModule' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

evento-routing.module.ts

代码语言:javascript
复制
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 { }
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-22 00:53:42

尝试对模板变量使用不同的名称:-

代码语言:javascript
复制
 <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的目的,我会考虑使用这样的指令,没有模板变量:-

代码语言:javascript
复制
 <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样式:-

代码语言:javascript
复制
.active.icon-info {
}
票数 0
EN

Stack Overflow用户

发布于 2019-07-22 00:52:21

这似乎是一个问题,因为您对这两个li都使用了完全相同的引用变量名。

实现这一目标的一个更简单的方法是摆脱#rta,让角的routerLinkActive为您做好它的工作:

代码语言:javascript
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57138034

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档