标签：for directive 绑定 doc css 循环 export today select
Angular2的视图是动态的，在不修改绑定到UI上的源数据的情况下，我们可以通过指令来改变数据的是否呈现，呈现形式，呈现样式。
(1).Angular2提供的最常用的指令是：
1.*ngIf=‘expression‘,通过expression的运算结果加载或者写在当前元素.
<h6 class="bg-success person-info-panel" *ngIf="selectedPerson !== null && utilities.isNotEmptyStr(selectedPerson.name)">
{{selectedPerson.name}},{{selectedPerson.phone}}
</h6>
2.*ngFor=‘expression and declarations‘ 循环输入的数组，根据每个成员的数据加载渲染模板为视图
<li class="person-info-panel" *ngFor="let person of availablePeople;let i = index">
<a devide-age-group [birthDay]="person.birthDay" (click)="updateSeletedPerson(person)">
{{person.name}},{{person.email}},{{person.phone | tailNumberLength:5}},{{person.birthDay}}
</a>
</li>
3.[ng-switch]=‘expression‘ 根据expression结果的不同case，加载不同的模板
<div [ng-switch]="conditionExpression">
<template [ng-switch-when]="case1">case1</template>
<template [ng-switch-when]="case1">case2</template>
<template [ng-switch-default]>default</template>
</div>
(2) 自定义指令，如下我们来自定义一个根据输入的不同的生日来划分年龄段，并以不同的样式呈现用户信息的指令devide-age-group
//age-group.service
import { Injectable } from ‘@angular/core‘;
@Injectable()
export class AgeGroupSvc{
constructor(){}
//该服务根据输入的生日返回不同的年龄组类别
getAgeByBirth(birthDay:Date){
let todayYear = (new Date()).getUTCFullYear();
let birthYear = birthDay.getUTCFullYear();
let age = todayYear - birthYear;
return age;
}
getAgeGroupByBirth(birthDay:Date){
let age = this.getAgeByBirth(birthDay);
if(age < 18){
return 1;
}else if(age >= 18 && age < 25){
return 2;
}else if(age >= 25 && age < 50){
return 3;
}else{
return 4;
}
}
}
import { Directive,SimpleChanges, ElementRef, Renderer,Input,OnChanges,OnInit,DoCheck} from ‘@angular/core‘;
import { AgeGroupSvc } from ‘./age‘
import set = Reflect.set;
@Directive({
/*
可用的选择器包括
‘a[directiveName]‘;只对a标签且有directiveName属性的元素执行该指令；
‘directiveName‘;对<directiveName></directiveName>这样的元素执行该指令；
‘[diractiveName]‘;对所有具有directiveName属性的元素执行该指令；
*/
selector: ‘[devide-age-group]‘, // 定义css选择器为属性选择
providers:[
//AgeGroupSvc作为一个服务，需申明为一个提供商
AgeGroupSvc
]
})
export class AgeGroupDevideDiretive implements OnInit{
ngOnInit(): void {
}
element:ElementRef;
_ageGroupSvc:AgeGroupSvc;
//接收到输入的生日时，通过age-group 服务得到年龄组类别，根据不同的类别为显示用户信息的元素设置不同的样式
@Input(‘birthDay‘) set setBirthDay(birthDay:Date){
let targetColor = ‘white‘;
let _birthDay = new Date(birthDay);
if(_birthDay instanceof Date){
let ageGroup = this._ageGroupSvc.getAgeGroupByBirth(_birthDay);
switch(ageGroup){
case 1:
targetColor = ‘red‘;
break;
case 2:
this.element.nativeElement.style.color = ‘black‘;
targetColor = ‘yellow‘;
break;
case 3:
targetColor = ‘green‘;
break;
case 4:
targetColor = ‘blue‘;
break;
default:break;
}
}
this.element.nativeElement.style.backgroundColor = targetColor;
}
constructor(element: ElementRef, renderer: Renderer, ageGroupSvc:AgeGroupSvc) {
this.element = element;
this._ageGroupSvc = ageGroupSvc;
// `nativeElement` is the direct reference to the DOM element
element.nativeElement.style.color = ‘white‘;
}
}
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
//在应用module中引入AgeGroupDevideDiretive
AgeGroupDevideDiretive
]
})
//devide-age-group以属性的方式引入，angular在当前元素的渲染的最后一步就是对该元素执行devide-age-group 指令
<a devide-age-group [birthDay]="person.birthDay" (click)="updateSeletedPerson(person)">
{{person.name}},{{person.email}},{{person.phone | tailNumberLength:5}},{{person.birthDay}}
</a>
Angular2 - Starter - Directives
标签：for directive 绑定 doc css 循环 export today select
原文地址：http://www.cnblogs.com/wzcblogs/p/6265745.html
