如何動態設置 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