Angular 4.x NgClass 指令用法

最新推荐文章于 2026-06-21 12:43:32 发布

转载最新推荐文章于 2026-06-21 12:43:32 发布 · 2.7k 阅读

收录于

Angular

引用地址：http://yunkus.com/angular-api-ngclass/

用法

语

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

示例

语法中的头两种方法估计一看就会，跟我们平时给一个元素添加类名差不多。在实践的项目中我们用得比较多的就是通过条件来判断将要添加哪一个 class 类。

准备

如果还没有工程的新建一个项目工程：

ng new my-app

更多内容可查阅《Angular 4.x 工程项目搭建之旅》，我们直接用项目默认生成的三个文件（app.component.ts、app.component.html、app.component.css）来完成我们的例子。

套路一

app.component.ts (v1)

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4.x NgClass';
}

app.component.html (v1)

<div>
<h1>{{title}}</h1>
<div [ngClass]="{'first': true, 'second': true, 'third': false}">云库前端</div>
</div>

app.component.css （后面的例子都会用到这个样式文件，就不再贴出来了）

.first {
font-size: 58px;
}
.second {
color: #373d41;
}
.third {
font-weight: bolder
}

这个示例其实也没什么意思，只是在上面的基础语法上添加了点样式而已。我们只需要关注 [ngClass]="{'first': true, 'second': true, 'third': false}" 这一行代码就可以了，它的写法也相当的清楚明了，以键值对的方法来显示，键为类名，值为一个布尔值（true | false），true 就显示对应的类，false 则删除对应的类。但在我们平时的项目中常常需要通过判断来动态地显示对应的类名，所以我们再作进一步探讨，实现动态显示类名。

套路二

在 app.component.ts 中添加一个变量，用作判断。

app.component.ts (v2)

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4.x NgClass';
classFlag = true;
}

修改 app.component.html 方法，只需要把 true 或者 false 替换成一个变量就可以了。

app.component.html (v2)

<div>
<h1>{{title}}</h1>
<div [ngClass]="{'first': classFlag, 'second': classFlag, 'third': !classFlag}">云库前端</div>
</div>

这样做有什么好处呢？你可以动态控制类名的显示隐藏，下面我们在模板中添加一个按钮，并且绑定一个点击事件，用来控制类名的显示与隐藏；更改后的文件代码如下：

app.component.ts (v3)

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4.x NgClass';
classFlag = true;
// 动态控制类名
changeClass(): void {
this.classFlag = !this.classFlag;
}
}

app.component.html (v3)

<div>
<h1>{{title}}</h1>
<div [ngClass]="{'first': classFlag, 'second': classFlag, 'third': !classFlag}">云库前端</div>
<button (click)="changeClass()">切换</button>
</div>

现在点击按钮就可以切换地显示不同的类名，你还可以单独控制每一个类的显示隐藏，只需给对应类添加一个用法判断的变量就可以。