一、ngClass的用途
ngClass指令主要用于动态控制HTML元素的CSS类，它允许我们在运行时添加或移除一个或多个CSS类。ngClass对于需要动态改变页面样式的情况非常有用。下面是一些具体的用途：1、根据某些条件添加或移除一个或多个CSS类。比如，在一些表单验证场景中，我们需要根据输入内容的有效性动态地添加或移除一些样式类，来提示用户输入是否正确。ngClass就可以很好地实现这一功能。
2、在页面中实现一些"标签色彩分类"的效果。在这种场景下，我们可以在数据模型上定义每个元素应该具有什么颜色的特殊标签，然后使用ngClass指令将这些颜色类动态地绑定到相应的HTML元素上，从而让用户更加清楚地看到信息。
3、根据某些状态切换CSS类，实现样式的多状态可变。在运营管理类的页面场景下，我们需要动态地切换某个元素的样式，以表示其不同的状态，比如正常、待审核、已审核等等。ngClass可以方便地替代我们手动控制样式或者写一遍又一遍类似的代码。
二、ngClass的用法
ngClass指令可以接收一个字符串、一个数组或者一个对象作为参数，并且可以与其他Angular指令结合使用。下面我们来具体了解一下它的使用方法。1、使用一个字符串作为参数
<div [ngClass]="'text-primary font-weight-bold'">
这是一个文本
</div>
在上面的例子中，我们把一个字符串"ngClass"绑定到了一个div元素上。该字符串中包含了两个CSS类，分别是"text-primary"和"font-weight-bold"。ngClass指令将会动态地为这个div元素添加这两个CSS类。
2、使用一个数组作为参数
<div [ngClass]="['text-primary', 'font-weight-bold']">
这是一个文本
</div>
在这个例子中，我们使用了一个包含两个元素的数组作为ngClass指令的参数。数组中的两个元素分别是"text-primary"和"font-weight-bold"，ngClass指令将会动态地把这两个CSS类绑定到该div元素上。
3、使用一个对象作为参数
<div [ngClass]="{'text-primary': isActive, 'font-weight-bold': isBold}">
这是一个文本
</div>
在这个例子中，我们使用了一个键值对对象作为ngClass指令的参数。该对象中的每个键名是一个CSS类名称，而每个值则表示该CSS类是否应该被添加到该元素上。在这个例子中，我们定义了两个CSS类，分别是"text-primary"和"font-weight-bold"。isActive和isBold是两个布尔变量，分别用于控制这两个CSS类是否应该被添加到该元素上。如果isActive和isBold的值为true，那么ngClass指令会把"text-primary"和"font-weight-bold"这两个CSS类绑定到该元素上。
4、与其他指令结合使用
同时使用ngClass和ngIf指令来动态控制页面中元素的显示和样式。<div [ngClass]="{'text-primary': isActive}" *ngIf="isVisible">
这是一个文本
</div>
在这个例子中，我们定义了一个包含ngClass和ngIf指令的div元素。ngClass指令根据isActive的值决定是否添加"text-primary"这个CSS类；ngIf指令根据isVisible的值决定是否显示该div元素。这样我们就可以动态地控制该div元素的样式和显示。
三、ngClass的实现案例
下面，我们来看两个实际的案例，从中体会ngClass的实际使用效果。1、动态变更表单元素状态
在表单验证场景中，我们通常需要动态地为输入框、下拉框等表单元素添加特定的CSS类来提示用户其输入内容是否正确。ngClass指令可以方便地实现这一功能。下面是一个基于Angular的表单验证代码的实例：form {
width: 450px;
margin: 0 auto;
padding: 20px;
border: 1px solid #CCC;
background-color: #FFF;
font-family: Arial;
}
.error {
border-color: red;
}
.valid {
border-color: green;
}
.ng-invalid.ng-dirty {
color: red;
}
.ng-valid.ng-dirty {
color: green;
}
.ng-invalid.ng-dirty > input {
background-color: #f8cccc;
}
.ng-valid.ng-dirty > input {
background-color: #ccf8cc;
}
.ng-valid.ng-dirty + .btn-primary,
.ng-invalid.ng-dirty + .btn-primary {
border-bottom-color: #FF9B57;
}
.ng-invalid.ng-dirty + .btn-primary[disabled] {
background-color: #FF9B57;
cursor: not-allowed;
}
下面是一个输入框的HTML代码：
<input type="text" name="username" placeholder="用户名" ngModel required minlength="4" maxlength="16" #username="ngModel" [ngClass]="{'error': !username.valid && username.dirty, 'valid': username.valid && username.dirty}" />
在这个例子中，我们使用了ngModel指令来双向绑定一个输入框的值，同时使用了ngClass指令动态地给该输入框添加了两个CSS类error和valid。当用户输入错误时，error类会被添加到该输入框上，提示用户输入有误；当用户输入正确时，valid类会被添加到该输入框上，提示用户输入正确。
2、动态控制菜单项样式
在后台管理系统中，我们通常需要动态地控制菜单项的样式，以便用户更直观地了解当前所在的页面以及导航到其他页面。ngClass指令可以方便地实现这一功能。下面是一个基于Angular的动态控制菜单项样式代码的实例：.menu ul li.active > a {
background-color: #DDD;
}
.menu ul li a:hover,
.menu ul li a:focus,
.menu ul li.open > a {
background-color: #EEE;
}
.menu ul li a i {
font-size: 18px;
}
.menu ul li i.fa-chevron-down {
float: right;
}
.menu ul ul li.parent > a {
background-color: #DDD !important;
}
.menu ul ul li > a:hover,
.menu ul ul li > a:focus {
background-color: #EEE !important;
}
<ul class="menu">
<li [ngClass]="{'active': isActiveA}">
<a href="#">
<i class="fa fa-user"></i>
<span>用户管理</span>
<i class="fa fa-chevron-down"></i>
</a>
<ul>
<li [ngClass]="{'parent': isActiveB}"><a href="#">用户列表</a></li>
<li><a href="#">用户添加</a></li>
<li><a href="#">用户更新</a></li>
</ul>
</li>
<li [ngClass]="{'active': isActiveC}"><a href="#"><i class="fa fa-book"></i><span>文章管理</span></a></li>
<li [ngClass]="{'active': isActiveD}"><a href="#"><i class="fa fa-comments"></i><span>评论管理</span></a></li>
</ul>
上面的代码中，我们使用了ngClass指令，在菜单项的li元素中添加了类active、parent等。通过这些类，我们可以动态地改变菜单项的背景颜色，以区分其状态。当一个菜单项被选中时，我们会将对应的isActiveA、isActiveB、isActiveC或isActiveD设置为true，从而将对应的CSS类添加到该菜单项的HTML元素上，以动态地改变页面样式。
