Angular 2如何使用变量作为ngClass的值

Question

我想为将添加到类列表的 ngClass 的值使用一个变量。我的用例是我有一个图像 Sprite 集合，有一个基本 Sprite ，然后是一个事件状态，它与基本 Sprite 具有相同的文件名，只是在末尾添加了“-active”。我通过为元素提供一个与所需 Sprite 文件名匹配的类来将 Sprite 添加到文档中。当用户将鼠标悬停在元素上时，我需要在两个 Sprite 之间来回切换。我该怎么做？

例如像这样的东西(注意:tool.name === 要显示的 Sprite 的文件名):

<li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'>
  <span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'>{{tool.name}}</span>
</li>

Answer 1

而不是类 .tool-name-active 您可以将您的类(class)设置为 .tool-name.active 然后您可以执行以下操作

<li *ngFor='let tool of tools'>
  <span class="{{tool.name}}" [ngClass]='{active: isActive}'>{{tool.name}}</span>
</li>