使用 NgClass 条件

在 Angular 应用程序中，您可以使用 NgClass 条件来动态更改元素的类。

NgClass

NgClass 指令允许您设置 CSS 类，可以基于复杂的表达式在运行时计算。

语法如下：

<some-element [ngClass]="classExpression">...</some-element>

其中，classExpression 是一个 js 表达式，它返回字符串或字符串数组。

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSpecial = true;
}

<div [ngClass]="{ 'special': isSpecial }">NgClass条件</div>

在上面的例子中，isSpecial 是一个 boolean，当它为真时，元素将包含名为 special 的类。

使用字符串数组

您还可以使用字符串数组来设置多个 CSS 类：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentClasses = {
    'class-a': true,
    'class-b': false
  };
}

<div [ngClass]="currentClasses">NgClass条件</div>

在上面的例子中，元素将包含名为 class-a 的类，因为它是设置为 true 的。

您还可以通过使用条件运算符来在数组中添加 / 移除类：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSpecial = true;
}

<div [ngClass]="[isSpecial ? 'special' : '']">NgClass条件</div>

在上面的例子中，如果 isSpecial 为 true，元素将包含名为 special 的类；否则，它将不包含任何额外的类。

组合 NgClass

您可以组合多个 NgClass 条件，以设置多个 CSS 类：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSpecial = true;
  canHighlight = false;
}

<div [ngClass]="{ 'special': isSpecial }" [class.highlight]="canHighlight">NgClass条件</div>

在上面的例子中，元素将包含名为 special 的类，因为它是设置为 true 的。它还将包含名为 highlight 的类，因为该类是硬编码在 HTML 中的。

您还可以使用可选的 object 和 string 并联/分离多个 CSS 类：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentClasses = {
    'class-a': true,
    'class-b': false
  };
  canHighlight = false;
}

<div [class]="['hardcoded-class', 'highlight']" [ngClass]="currentClasses">NgClass条件</div>

在上面的例子中，元素将包含名为 hardcoded-class 和 highlight 的类，因为它们是硬编码的。它还将包含名为 class-a 的类，因为它是设置为 true 的。

总结

使用 NgClass 条件，您可以动态地更改元素的类。它对于根据用户行为添加/删除 CSS 类非常有用，例如：打开/关闭菜单、切换主题等。