Angular 4+ ngClass 混合表达式

Question

我正在尝试将 2 个值传递给 ngClass。

你是怎么做到的：

[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}"

Answer 1

[ngClass] 接受一个对象并解析它的样式。所以你的两个值将在一个对象内部传递，如下所示，对应的 class 在左边

[ngClass]="{'cssprefix-' + var.value: ! ifTrue, 'newclass' : ifTrue}"

更多信息：您还可以在 [ngClass]

中执行逻辑运算符和其他条件

[ngClass]="{'someCondClass': ifTrue && (somethingElse || anotherCondition)}"

Answer 2

您可以移动描述类内容的逻辑以添加到控制器的方法中：

// controller
getClasses(ifTrue: boolean, value: string) {
    const ret = {};
    ret['cssprefix-' + value] = true;
    ret['newclass'] = ifTrue;

    return ret;
} 

// in template
[ngClass]="getClasses(ifTrue, var.value)"

您也可以直接绑定到 class 属性：

[class]="'cssprefix-' + var.value" [ngClass]="{'newclass' : ifTrue}"

或者使用字符串插值：

class="{{ 'cssprefix-' + var.value }}" [ngClass]="{'newclass' : ifTrue}"

Answer 3

编辑新答案：
在我以前的回答中，ngClass 将 "as c" "c" 字面上的 css class "c"。这似乎有效。

<div [class]="'csspefix-' + cssSuffix.value" [ngClass]="{ 'newclass' : ifTrue}"></div>

旧答案：
在我的示例中，我将 var 重命名为 cssSuffix 因为解析器不喜欢 var 关键字。

<div *ngIf="'csspefix-' + cssSuffix.value as c" [ngClass]="{ c: true, 'newclass' : ifTrue}"></div>

这是我让它工作的唯一方法，因为解析器不喜欢 ngClass 中对象表达式属性侧的“+”或“(”。

Angular 4+ ngClass 混合表达式

Angular 4+ ngClass Mix Expressions

angular

ng-class