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

我怎么能以角2方式做到这一点？现在我只是添加了一个布尔值并翻转它，并根据值显示不同的模板。但是，似乎应该有办法通过一些功能处理这个问题吗？它在文档中说你可以使用由空格分隔的字符串来表示多个类，但我不知道该怎么做。

Answer 1

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

该指令需要一个对象，其类名为key，布尔表达式为value。如果表达式为true，则添加该类，否则将删除该类。

例如，您的按钮具有类btn，并且应该具有btn-add或btn-remove，具体取决于布尔值，而不是您可能执行以下操作：

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

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

Answer 2

也要切换按钮的文字：

<div class="menu">
  <div>
    <a class="link" href="/">link 1</a>
    <div class="subMenu">
      <a class="link" href="/">link 2</a>
      <a class="link" href="/">link 3</a>
      <a class="link" href="/">link 4</a>
    </div>
    <a class="link" href="/">link 5</a>
  </div>
</div>

Answer 3

您可以尝试以下代码：

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = true">
  Add<i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i>
</button>

Answer 4

您可以将事件传递给函数，而不是使用布尔变量作为此类功能的控制器，以便您可以获得对元素及其类列表的引用，并根据需要对其进行操作。 / p>

你的模板应该是这样的：

<button class="btn" (click)="toggleClass($event)">

并在您的课程中添加：

toggleClass(e) {
  const classList = e.target.classList;
  const classes = e.target.className;
  classes.includes('clicked') ? classList.remove('clicked') : classList.add('clicked');
}