Angular 2：处理按钮的点击事件答案

【问题标题】：Angular 2 : Handling click event for buttonAngular 2：处理按钮的点击事件
【发布时间】：2017-07-20 13:54:05
【问题描述】：

我有 3 个按钮。当我点击第一个按钮时，它的文本和 css 会改变，当我点击同一个按钮时，我会像以前一样得到默认的 css。我想要所有 3 个按钮。这段代码我试过了。

.add_btn{
border:thin red solid;
}
.added_btn{
border:thin black solid;
}

<button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>
<button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>
<button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>

我可以通过点击添加多个按钮。

任何帮助都会很棒。

谢谢。

【问题讨论】：

标签： angular

【解决方案1】：

您可能希望使用 Angular2+ 的功能 NgClass，因为它可以在 HTML 元素中添加或删除 CSS 类。

【讨论】：

【解决方案2】：

<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>
<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>
<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>

.added_btn{
  border:thin black solid !important;
}

【讨论】：