如何从类组件中动态设置 Angular 中元素的 CSS 类列表？答案

【问题标题】：How can I dynamically set a CSS class list of an element in Angular from the class component?如何从类组件中动态设置 Angular 中元素的 CSS 类列表？
【发布时间】：2022-01-25 23:26:22
【问题描述】：

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

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

在类组件内部：

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 {}
}

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

【问题讨论】：

标签： javascript html node.js angular ecmascript-6

【解决方案1】：

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

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

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

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

我提供了stackblitz

【讨论】：

嘿@skyBlue，我不知道你是否理解我，但我希望能够更改该组件中的 propertyVariable 并使用它来存储我希望添加到类属性中的类。
我写了 4 段。 2-3-4 将满足您的需求。
创建一个 getter，就像我在第 3 段中所说的那样。然后将结果绑定到第 2 段中的模板中。
我添加了 stackblitz。 @KlemLloydMwenya

【解决方案2】：

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

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

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

【讨论】：