Angular2的指令有以下3种
- 组件
- 属性指令
- 结构指令
组件是带有模板的真正指令,它是这三种指令中最常见的也是实际开发中用的最多的。
属性指令 用于改变元素的外观和行为。例如,ngStyle 指令可以同时改变一个元素的多个样式,我们通过把他绑定到一个组件的属性上实现文本加醋,字体为斜体,颜色设置为石灰绿等效果。
结构指令 操作DOM元素来改变DOM的布局,操纵DOM 是一个单页面页面(SPA)。3个常见内置结构指令。
- ngIf : 删除元素,非隐藏元素 (再次使用就要重组组件)
- ngFor
- ngSwitch
<div *ngIf="hero">{{hero}}</div>
<div *ngFor="#hero of heroes">{{hero}}</div>
<div [ngSwitch]="status">
<template [ngSwitchWhen]="'1'">1</template>
<template [ngSwitchWhen]="'2'">2</template>
<template ngSwitchDefault>Unknown</template>
</div>
创建一个指令和创建一个组件是类似的:
- 引入Directive装饰器
- 添加一个css的属性选择器(在括号内),用于标识我们的指令
- 为用于绑定的公共input属性指定名称。(通常是指令本身的名称)
- 把装饰器应用到我们实现的类上。
unless.directive.ts (excerpt):
import {Directive,Input} from 'angular2/core';
@Directive({
selector:'[myUnless]'
})
export class UnlessDirective{
}