Angular 4-選擇單擊的列表項

Question

我在下面的代碼片段中列出了以下項目。 在鼠標單擊上，我想選擇該項目（添加“活動”類，並取消選擇remove'active類是否選擇了其他任何項目（兄弟姐妹）。這是我的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添加活動類，以目前的路線和使用routerLink a ，而不是li 。

<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>