如何动态设置 CSS class Angular 中的元素列表 ZA2F2ED4F8EBC2CBB1D4C21A29DC4 组件？

Question

我想将属性设置为字符串并将其作为 class 列表值动态添加到某个 DOM 元素中。

<div [className]="propertyVariable"></div>

在 class 组件内部：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css'],
})
export class OrderComponent implements OnInit {
  propertyVariable: string;

  constructor() {}

  changePropertyVariable() {
    this.propertyVariable = 'class1 class2';
  }

  ngOnInit(): void {}
}

到目前为止，它没有将 class 列表添加到该变量。 如何正确绑定到该属性？

Answer 1

如果条件为真，则像[class.className]="condition"一样使用它来添加className 。 在这种情况下， className在模板中被硬编码。

如果您希望您的 class 名称是动态的，您可以使用以下语法： class="class1 class2 {{className}}" 。

对于附加类列表，您可以像上面一样使用它，只通过className = classList.join(' '); 作为className 。

所以你的模板会像： class="class1 class2 itemOneFromList itemTwoFromList..."

Answer 2

为什么不使用带有属性绑定的 Angular ngClass 指令来动态添加类？

<div [ngClass]="propertyVariable"></div>

https://angular.io/guide/property-binding