在Angular2中，如何在不使用RouterLinkActive的情况下单击链接时向元素添加CSS类？答案

【问题标题】：In Angular2, how to add a CSS class to an element when the link is clicked without using RouterLinkActive?在Angular2中，如何在不使用RouterLinkActive的情况下单击链接时向元素添加CSS类？
【发布时间】：2017-01-12 12:46:33
【问题描述】：

我正在使用

创建导航菜单

<li *ngFor="let child of children">
  <a (click)="navChanged(child.name)">
    <div> {{child.name}} </div>
  </a>
</li>

现在我想将class="active" 添加到处于活动状态（单击）且我没有使用路由的 child.name。

【问题讨论】：

请尝试属性绑定 [has.class]="ifClicked" 其中 IsClicked 是一个组件属性，您可以基于此属性添加和删除类

标签： angular angular2-template

【解决方案1】：

在您的组件中添加一个变量selected，并将其与NgClass 一起使用以添加active 类。

组件：

public selected: string = '';

public function navChanged (child: string){
    this.selected = child
}

HTML：

<li *ngFor="let child of children">
  <a (click)="navChanged(child.name)" [ngClass]="{'active' : child.name === selected}">
    <div> {{child.name}} </div>
  </a>
</li>

【讨论】：

非常感谢您的回答和正确编辑我的问题，非常感谢！

【解决方案2】：

查看以下示例

<li *ngFor="let child of children">
  <a (click)="navChanged(child.name)">
    <div [ngClass]="{active: isActive(n)}"> {{child.name}} </div>
  </a>
</li>

  navChanged(item) {
      this.selected = item; 
  };
  isActive(item) {
      return this.selected === item;
  };

仅使用 html

<li *ngFor="let child of children">
  <a (click)="navChanged(child.name);clicked = (clicked === n ? null :n)">
    <div [class.active]="clicked === n" > {{child.name}} </div>
  </a>
</li>

【讨论】：