角 10 | 将类名作为变量添加到 ngClass

Question

我有 20 多个元素，它们都应该使用相同的类 (animate.css)

如果我想编辑动画，更改所有类是非常烦人的，所以我将动画类保存在我的服务中的一个变量中：

animClassSecond = "animate__animated animate__bounceInUp";

但我不知道如何将它添加到 [ngClass]，这不起作用：

[ngClass]="{'select_elem':true, 'btn_2':true, 'dataService.animClassSecond':true}"
[ngClass]="{'select_elem':true, 'btn_2':true, 'this.dataService.animClassSecond':true}"
[ngClass]="{'select_elem':true, 'btn_2':true, this.dataService.animClassSecond:true}"
[ngClass]="{'select_elem':true, 'btn_2':true, dataService.animClassSecond:true}"

它要么是模板错误，要么无法解析为变量。有任何想法吗？

PS：添加第二个 [ngClass] 属性也不起作用，因为第一个属性被忽略。

Answer 1

是：

[ngClass]="dataService.animClassSecond"

但请记住，您需要在构造函数中将服务声明为公共

constructor(public dataService:DataService){}

注意您可以在同一标签中使用 class 和 [ngClass]：

class="select_elem btn_2" [ngClass]="dataService.animClassSecond"