角度绑定到类或ngClass - Javascript

在Angular中，我们可以使用ngClass指令来动态绑定一个元素的CSS类。

语法

ngClass指令有两种语法：对象语法和数组语法。

对象语法

对象语法允许我们基于属性值是否为真或假来动态添加或删除一个或多个CSS类。这里是一个例子：

<div [ngClass]="{ 'red': isRed, 'blue': isBlue }">My text</div>

在这个例子中，My text字体的颜色会根据isRed和isBlue的值来动态变化。

数组语法

数组语法允许我们在元素中动态绑定一个CSS类组。下面是一个例子：

<div [ngClass]="[ 'red', 'bold' ]">My text</div>

在这个例子中，My text字体的颜色将变成红色，并且字体将会加粗。

在类中绑定ngClass

我们也可以使用类来绑定ngClass。这样做可以使得我们的代码更加规整和可维护。

下面是一个例子：

<div [ngClass]="myClass">My text</div>

在组件中定义一个myClass变量并给它设置一个值：

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

@Component({
  selector: 'my-app',
  template: `
    <div [ngClass]="myClass">My text</div>
  `,
})
export class AppComponent {
  myClass = {
    'red': true,
    'bold': false
  };
}

在这个例子中，My text的字体将会是红色，但是不会加粗，因为在myClass中，bold属性的值为false。

总结

ngClass指令是Angular中非常实用的指令之一。我们可以使用它来动态地绑定一个元素的CSS类，以达到更好的用户交互效果。在类中绑定ngClass可以使得代码更加可维护。