Angular 6 [ngclass]-添加一个类，其名称由多个变量组成-直接在[ngClass]上进行字符串连接

Question

我正在使用角度6。以以下变量为例：

var1 = 'my';
var2 = '-';
var3 = 'class';

我该怎么做？

<div [ngClass]='var1 + var2 + var3'></div>

期望生成的HTML如下所示：

<div class='my-class'></div>

[编辑]

我知道可以使用辅助功能来获得这样的类名：

getClassName(): {
 return var1 + var2 + var3;
}

<div [ngClass]='getClassName()'></div>

但是我真正想要的是一种使用angular直接在html上执行此操作的方法

Answer 1

嗯，有很多方法可以做到这一点。我会推荐这样的东西：

https://stackblitz.com/edit/angular-xtwwwi

希望这会有所帮助。

编辑。您始终可以将数组传递给函数，然后返回字符串。我的示例只是ngClass如何工作的原始示例。同样，您的方法也可以使用：

[ngClass]="var1 + var2 + var3"

Answer 2

您应该使用字符串插值：

<div [ngClass]="`${var1 + var2 + var3}`">