Angular 4 - 选择点击的列表项答案

【问题标题】：Angular 4 - Select clicked list itemAngular 4 - 选择点击的列表项
【发布时间】：2018-07-10 04:07:16
【问题描述】：

我在下面的代码 sn-p 中有如下列表项。单击鼠标时，我想选择该项目（添加“活动”类，如果删除“活动”类选择了任何其他项目（兄弟姐妹），则取消选择。这是我的 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);
 }
}

当我第二次单击列表时，将添加活动菜单类。不要我的代码有什么问题。但在控制台中，它会正确打印字符串。

【问题讨论】：

RouterLinkActive 不起作用吗？
您上面的代码正在运行，当您单击任何 li 时，将添加类。请检查我的解决方案。

标签： angular

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的。这工作正常。感谢您提供更好的解决方案。 @kejriwal