在 Angular 中的 NgClass

在 Angular 中，我们经常需要根据一些条件来动态地修改 DOM 元素的样式。这时候，我们就可以使用 NgClass 指令来实现。

NgClass 指令简介

NgClass 是 Angular 内置的一个指令，用于动态地添加或删除一个或多个 CSS 类。它可以接收一个对象、一个数组或一个字符串作为参数，根据不同的参数类型实现不同的功能。

NgClass 的使用方法

1. 使用对象作为参数

当我们需要根据多个条件来判断是否添加某个 CSS 类时，可以使用一个对象作为 NgClass 的参数。对象的 key 是 CSS 类名，value 是一个 boolean 表达式，如果为 true，则添加该 CSS 类，否则不添加。

<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }"></div>

上面的例子中，如果 isActive 为 true，则添加 active 类，如果 isDisabled 为 true，则添加 disabled 类。

2. 使用数组作为参数

当我们需要根据多个条件来判断是否添加多个 CSS 类时，可以使用一个数组作为 NgClass 的参数。数组中的每个元素都是一个 CSS 类名，根据条件判断是否添加该类。

<div [ngClass]="[ 'active', isActive ? 'enabled' : 'disabled' ]"></div>

上面的例子中，无论 isActive 是否为 true，都会添加 active 类，如果 isActive 为 true，则添加 enabled 类，否则添加 disabled 类。

3. 使用字符串作为参数

如果我们只需要添加一个 CSS 类，可以直接使用一个字符串作为 NgClass 的参数。

<div [ngClass]="'active'"></div>

上面的例子中，直接添加 active 类。

NgClass 的高级用法

1. 使用 NgClass 的返回值作为参数

NgClass 可以接收一个函数作为参数，该函数的返回值将作为 NgClass 的参数。这种用法可以实现更加复杂的逻辑。

<div [ngClass]="getClass()"></div>

getClass() {
  return {
    'active': this.isActive,
    'enabled': this.isEnabled && this.isActive,
    'disabled': !this.isEnabled,
  };
}

上面的例子中，getClass 函数返回一个对象，根据多个条件判断是否添加多个 CSS 类。

2. 使用 NgClass 的变量名引用

可以使用 @ViewChild 装饰器来获取 NgClass 指令的实例，然后可以通过该实例来动态地添加或删除 CSS 类。

<div #myDiv [ngClass]="{ 'active': isActive }"></div>

@ViewChild('myDiv') myDiv: ElementRef;

toggleActive() {
  this.isActive = !this.isActive;
  this.myDiv.nativeElement.classList.toggle('active');
}

上面的例子中，使用 @ViewChild 获取 myDiv 元素的实例，然后在 toggleActive 函数中动态地添加或删除 active 类。

总结

NgClass 是 Angular 中非常实用的一个指令，它可以帮助我们动态地修改 DOM 元素的样式，实现更加灵活的界面交互效果。我们可以根据不同的参数类型来实现不同的功能，也可以使用 NgClass 的高级用法来实现更加复杂的逻辑。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657aeb1ed2f5e1655d56a256