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

Question

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

例如这样的东西（注意：tool.name ===要显示的精灵的文件名）：

<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

您可以以

.tool-name.active

的身份上课 然后你可以执行以下操作

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

Answer 2

也许使用函数返回 ngClass 数组会有所帮助。

<li *ngFor='let tool of tools'><span [ngClass]='chkClass(tool)'>{{tool.name}}</span></li>


public chkClass(item:any){
    let newClass = {};
     newClass[item.name+ '-active'] = true;
     newClass[item.name] = false;
     return newClass;
}

Answer 3

获得

.tool-name-active

| 的另一种选择

.tool-name

在一个属性中将是：

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

或获取以下内容

.tool-name.active

|

.tool-name

你也可以这样做：

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