网站首页 » 前端开发 » Angular 2+ » Angular 4.x NgClass 指令用法
上一篇:
下一篇:

Angular 4.x 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>

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

套路三

你还可以批量添加类名,用法跟上面的差不多。

你只需要修改下 app.component.html  (v3) 中的代码就可以了:

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

套路四

这个除了模板中的代码有点不一样外,其它的文件代码都跟上面的一样,当你要添加的类名只有一个的时候,你可以像下面这样写

app.component.html (v5)
<div>
  <h1>{{title}}</h1>
  <div [class.first]="classFlag">云库前端</div>
  <button (click)="changeClass()">切换</button>
</div>

套路五

除了可以给 NgClass 添加字符串类型的类名外,我们还可以使用对象,数组来添加多个类。

我们只对 app.component.html 和 app.component.ts 稍作修改就可以了,其它代码不需要改动:

app.component.html (v6)
<div>
  <h1>{{title}}</h1>
  <div [ngClass]="classArray">云库前端</div>
  <!-- <button (click)="changeClass()">切换</button> -->
</div>
app.component.ts (v6)
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 {
  //   if (this.classArray.length != 0) {
  //     this.classArray = [];
  //   } else {
  //     this.classArray = [
  //       "first",
  //       "second",
  //       "third"
  //     ]
  //   }
  // }

  // 把类名保存在一个数组中
  classArray: String[] = [
    "first",
    "second",
    "third"
  ]
}

套路六

如果想切换效果,把模板 app.component.html 和 app.component.ts 中注释的代码放出来就可以了。

如果是通过对象来添加的话,你可以更人性化了,因为你可以通过 key:value (key 为类名,value 为布尔值)的形式来控制显示隐藏对应的类名我们来看个例子:

app.component.html (v7)
<div>
  <h1>{{title}}</h1>
  <div [ngClass]="classObject">云库前端</div>
  <button (click)="changeClass()">切换</button>
</div>
app.component.ts (v7)
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 = false;
  classObject: Object = {}

  // 动态控制类名
  changeClass(): void {
    this.classFlag = !this.classFlag;
    this.classObject = {
      "first": this.classFlag,
      "second": !this.classFlag,
      "third": this.classFlag
    }
  }
}

关温暖

Angular 1.x 中的写跟上面的也差不了多,所以在里也把 Angular 1.x  的贴出来:

Angular 1.x NgClass
<div ng-class="{first: classFlag}"></div>
<div ng-class="{first: classFlag,second: classFlag}"></div>
<div ng-class="{true: 'first',false: 'second'}[classFlag]"></div>

上面就是 Angular 1.x 关于 NgClass 判断显示类名的3种写法, Angular 4.x NgClass 跟 Angular 1.x  的写法很相似有没有。

以上就是 Angular 4.x NgClass 的基本用法,喜欢就收藏吧!

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-api-ngclass/

评论4
  1. Martin_lee 2017年11月16日 at pm6:00 回复

    感谢。

    • 朝夕熊 2017年11月19日 at pm12:17 回复

      不客气!

  2. Jet Lu 2017年12月18日 at pm2:06 回复

    Thanks a lot;

  3. Martin 2018年4月16日 at pm1:23 回复

    app.component.html (v3)

    {{title}}
    云库前端
    切换

    这样可能会出一个
    Expression has changed after it was checked. Previous value: ‘true’. Current value: ‘false’.
    这样的错误呢。。

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END