Question

我在下面的代码段中有以下列表项。在鼠标单击时，我想选择该项目（添加'active'类并取消选择remove'active class选择的任何其他项目（兄弟姐妹）。这是我的nav-bar.component.html

  <li routerLink="/dashboard">
    <a [ngClass]="{'active-menu': selected == 'dashboard'}" (click)="selectClass('dashboard')" ><i class="fa fa-dashboard fa-3x"></i> Dashboard</a>
  </li>
  <li routerLink="/ui" >
    <a [ngClass] ="{'active-menu': selected == 'ui'}" (click)="selectClass('ui')"><i  class="fa fa-desktop fa-3x"></i> UI Elements</a>
  </li>
  <li routerLink="/blank"  (click)="selectClass('blank')">
    <a [ngClass] ="{'active-menu': selected === 'blank'}"><i class="fa fa-square-o fa-3x"></i> Blank Page</a>
  </li>

这是我的nav-bar.component.ts文件

export class NavBarComponent implements OnInit {
  selected: string;
   constructor() {}
   ngOnInit() {  }
   selectClass(selected: string) {
   this.selected = selected;
   console.log(this.selected);
 }
}

第二次单击列表时，将添加活动菜单类。我的代码没有错。但在控制台中，它正确打印字符串。

Answer 1

更好的方法是使用内置指令routerLinkActive将活动类添加到当前路由，并在a而不是li中使用routerLink。

<li routerLinkActive="active-menu">
    <a routerLink="/dashboard"><i class="fa fa-dashboard fa-3x"></i> Dashboard</a>
</li>

Answer 2

您的代码在我的计算机上正常运行。您是否尝试过使用类绑定，例如

<li routerLink="/dashboard">
 <a [class.active-menu]="selected == 'dashboard'" (click)="selectClass('dashboard')" >
 <i class="fa fa-dashboard fa-3x"></i> Dashboard</a>
</li>

处理案例的另一种方法是使用routerLinkActive指令。在您的示例中，我们可以按以下方式格式化链接。

<li routerLink="/dashboard" routerLinkActive="active-menu">
 <a><i class="fa fa-dashboard fa-3x"></i> Dashboard</a>
</li>

Angular 4 - 选择单击的列表项

2 个答案: