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

我想要将一个变量用于将添加到班级列表中的ngClass的值。我的用例是我有一个图像精灵的集合，有基础精灵，然后是一个活动状态，它与基础精灵的文件名相同，只有'-active'添加到结尾。我通过给元素添加一个匹配所需的精灵文件名的类来将精灵添加到文档中。当用户悬停在元素上时，我需要在两个精灵之间来回切换。我怎么做？Angular 2如何使用ngClass的值的变量

例如像这样（注：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>

来源

2016-12-01 efarley

您是否需要像切换isActive之类的动态true/false之间的动态？ –

不，每个tool.name都匹配一个精灵的文件名，另外每个精灵都有一个同名的第二个文件，但是添加了-active。我需要在悬停的两个精灵之间切换。 – efarley

在具有.tool-name-active类代替你可以有你的类为.tool-name.active 然后您可以执行以下操作：

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

来源

2016-12-02 00:52:57 lthh89vt

。 -active是一个精灵名称，所以我需要整个字符串。例如，如果isActive为false，则结果为.color-btn;如果isActive为true，则结果为.color-btn-active。 .color-btn.active只会加载名为color-btn的精灵。 – efarley

我的意思是如果可能的话，你可以将你的css类名从.color-btn-active改为.color-btn.active。 – lthh89vt

这不是，正如我所说我需要该类.color-btn-active，以便它匹配color-btn-active.png我也需要.color-btn，以便它匹配color-btn.png。如果我没有这些类匹配文件名，那么精灵不会加载。 – efarley

也许使用函数返回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; 
}

来源

2016-12-02 01:08:54

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

回答

相关问题