Angular将通用指令包含在CommonModule模块中,当需要使用这些通用指令时,需要在模块中导入。
BrowserModule模块已经包含了CommonModule模块,所以当引入BrowserModule时,就可以使用了。
NgClass
利用NgClass指令,可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象,其中value的值是一个布尔型的值,当value值为true时,添加对应类型的模板元素,反之则移除。
//基本用法
<i [ngClass]="{green: true}"></i>
//判断
<i [ngClass]="{green: isAddr, red: !isAddr}"></i>
NgStyle
NgStyle绑定一个有形如CSS属性名:value的对象,其中value为具体的css样式
<div [ngStyle]="{'background-color':'green'}"></<div>
//判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
NgIf
指定绑定一个布尔型的表达式,当表达式返回true时,可以在DOM树节点上添加一个元素及其子元素,反之被移除
<i *ngIf="nameTip"></i>
NgSwitch、NgSwitchCase、NgSwitchDefault
NgSwitch:绑定到一个返回控制条件的值表达式
NgSwitchCase:绑定到一个返回匹配条件的值表达式
NgSwitchDefault:用于标记默认元素的属性
<span [ngSwitch]="favoriteHero">
<p *ngSwitchCase="true">
Excellent choice!
</p>
<p *ngSwitchCase="false">
No movie, sorry!
</p>
<p *ngSwitchDefault>
Please enter your favorite hero.
</p>
</span>
NgFor
NgFor指令可以实现重复执行某些操作来展示数据。NgFor指令支持一个可选的index索引。
<ul>
<li *ngFor="let fruit of fruitsList,let i=index">{{fruit}}</li>
</ul>
在一些包含复杂项目的列表中,每次更改会引起很多相互关联的DOM操作,这里使用NgFor指令会让性能变差。在服务器上重新拉取数据时,拉取的数据可能包含很多之前显示过的数据,但Angular并不知道哪些列表数据在数据更新前已经显示过,哪些没有显示过,只能清除旧列表的DOM元素,并用新的列表数据填充DOM元素来重建一个新列表。这个情况下可以用追踪函数来避免这种重复渲染。
//追踪函数
trackByFruits(index:number,fruit:Fruit){
return fruit.id;
}
<ul>
<li *ngFor="let fruit of fruitsList,trackBy:trackByFruits">{{fruit}}</li>
</ul>
NgTemplateOutlet
NgTemplateOutlet指令可以在模板中中创建内嵌视图。使用NgTemplateOutlet,需要为指令绑定一个队模板元素的引用。也就是说,使用NgTemplateOutlet指令时,需要在组件中声明一个模板元素的引用,并将这一变量绑定给指令作为输入属性。NgTemplateOutlet指定的基本用法:
<template [ngTemplateOutlet]="templateRefExpression"><template>
除此之外,还可以为被插入的内嵌视图绑定一个上下文对象。NgTemplateOutlet指令有一个ngOutletContext属性,通过给ngOutletContext属性绑定输入变量,可以将当前模板中获取的上下文对象绑定到被插入的内嵌视图中。
<template [ngTemplateOutlet]="templateRefExpression" ngOutletContext="objectExpression"><template>
import {Component} from "@angular/core";
@Component({
selector: 'ng-template-outlet-example',
template: `
<template #foo let-name="name" let-skills="skills">
<h4>{{name}}</h4>
<ul>
<li *ngFor="let s of skills">{{s}}</li>
</ul>
</template>
<div [ngTemplateOutlet]="foo"
[ngOutletContext]="msg1">
</div>
<div [ngTemplateOutlet]="foo"
[ngOutletContext]="msg2">
</div>
`
})
export class NgTemplateOutletExample {
msg1;
msg2;
constructor() {
this.msg1 = {
name: "Zhentian",
skills: ["JS", "Angular"]
};
this.msg2 = {
name: "Wan",
skills: ["JSX", "React"]
};
}
}
NgPlural、NgPluralCase
NgPlural、NgPluralCase是一组搭配使用的指令。NgPlural是一个国际化指令,其作用和NgSwitch指令类似,可以看作是NgSwitch指令的一种变种,NgPluralCase指令可以类比NgSwitchCase类理解。
Ngplural与NgSwitch的指令差异体现在:使用NgPlural指令需要继承NgLocalization类并实现getPluralCategory()方法,在这一方法中,根据具体的分类需求,将落在某一个范围的值命名的一个分类,并将分类名称返回,而返回的分类,可以个[ngPlural]绑定值进行匹配,当值属于这一分类的定义范围时,就当匹配成功。
所以,NgSwitch指令只能进行精确匹配,而NgPlural指令除了进行精确匹配外,还可以进行范围匹配。
import {Component} from "@angular/core";
@Component({
selector:'ng-plural',
template:`
<p>{{value}}</p>
<button (click)="inc()">增加</button>
<div [ngPlural]="value">
<template ngPluralCase="=0">0</template>
<template ngPluralCase="=1">1</template>
<template ngPluralCase="other">其他</template>
</div>
`
})
export class NgPluralExample{
value:any="init";
inc(){
this.value=this.value==='init'?0:this.value+1;
}
}