Angular 4+ ngClass 混合表达式
Angular 4+ ngClass Mix Expressions
我正在尝试将 2 个值传递给 ngClass。
你是怎么做到的:
[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}"
[ngClass]
接受一个对象并解析它的样式。所以你的两个值将在一个对象内部传递,如下所示,对应的 class 在左边
[ngClass]="{'cssprefix-' + var.value: ! ifTrue, 'newclass' : ifTrue}"
更多信息:
您还可以在 [ngClass]
中执行逻辑运算符和其他条件
[ngClass]="{'someCondClass': ifTrue && (somethingElse || anotherCondition)}"
您可以移动描述 类 内容的逻辑以添加到控制器的方法中:
// 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}"
编辑新答案:
在我以前的回答中,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 中对象表达式 属性 侧的“+”或“(”。
我正在尝试将 2 个值传递给 ngClass。
你是怎么做到的:
[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}"
[ngClass]
接受一个对象并解析它的样式。所以你的两个值将在一个对象内部传递,如下所示,对应的 class 在左边
[ngClass]="{'cssprefix-' + var.value: ! ifTrue, 'newclass' : ifTrue}"
更多信息:
您还可以在 [ngClass]
[ngClass]="{'someCondClass': ifTrue && (somethingElse || anotherCondition)}"
您可以移动描述 类 内容的逻辑以添加到控制器的方法中:
// 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}"
编辑新答案:
在我以前的回答中,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 中对象表达式 属性 侧的“+”或“(”。