angular怎么动态绑定class

### 动态绑定类

在 Angular 中，可以利用 `ngClass` 指令来实现基于条件的 CSS 类动态绑定。通过这种方式可以根据特定逻辑控制 DOM 元素上的样式应用情况。

对于简单的布尔判断场景：

<p [ngClass]="{'classname': serverStatus === 'online'}">Server Status</p>

上述代码片段展示了当 `serverStatus` 变量等于 `'online'` 时会向 `<p>` 标签添加名为 `classname` 的 CSS 类[^1]。

如果需要处理更复杂的多类组合或对象形式的数据驱动，则可以通过传递一个对象给 `ngClass` 来完成操作：

// Component code snippet
import { Component } from '@angular/core';

@Component({
  selector: 'app-server-status',
  templateUrl: './server-status.component.html'
})
export class ServerStatusComponent {
  statusClasses = {
    online: this.serverOnline(),
    offline: !this.serverOnline()
  };

  private serverOnline(): boolean {
    // Logic determining whether the server is online.
    return true;
  }
}

<!-- Template -->
<div [ngClass]="statusClasses">
  <!-- Content here will have either "online" or "offline" class applied based on logic within component. -->
</div>

此外还可以直接传入字符串数组作为参数来进行多个固定类名的同时切换：

<span [ngClass]="['fixed-class', anotherCondition ? 'dynamic-class' : '']"></span>

这种灵活性使得开发者能够轻松应对不同业务需求下的 UI 层面变化。