Angular 2 改变按钮的样式 onClick

Question

我在尝试更新点击按钮的样式时遇到了很多麻烦。

首先，这是原始标记:

<button class="btn btn-add" (click)="handleButtonClick(id)">
  Add<i class="fa fa-plus-circle"></i>
</button>

点击按钮时，我试图:

1. 从 "btn btn-add" 更改类至 "btn btn-remove"

2. 更改 <i class="fa fa-plus-circle">至 <i class="fa fa-minus-circle">

我怎样才能以 Angular 2 的方式做到这一点？现在我只是添加了一个 bool 值并翻转它，并根据值显示不同的模板。但是，似乎应该有一种方法可以通过某些功能来处理这个问题，对吗？在文档中它说您可以为多个类使用由空格分隔的字符串，但我不确定该怎么做。

Answer 1

在您的评论中您说您尝试了 ngClass 但遇到了问题:

该指令需要一个以类名作为键和一个 bool 表达式作为值的对象。如果表达式为真，则添加类，否则将被删除。

例如，您的按钮具有类 btn 并且应该具有 btn-add 或 btn-remove 取决于 bool 值，比你可能会做这样的事情:

<button class="btn" [ngClass]="{ 'btn-add': isAddButton, 'btn-remove': !isAddButton  }">
</button>

希望这有助于您理解 ngClass，然后在您的其他用例中使用它不会有问题。