angular2中指令、组件、管道、服务的定义

1  指令

@Directive({
    selector:'[tooltip]'
})
export class tooltip{
    private overlay:Overlay;
    @Input()
    private tooltip:string;
    constructor(private el:ElementRef,manager:OverlayManager){
        this.overlay=manager.get();
    }
    @HostListener('mouseenter')
    onMouseEnter(){
        this.overlay.open(this.el.nativeElement,this.tooltip);
    }
    @HostListener('mouseleave')
    onMouseLeave(){
        this.overlay.close();
    }
}

        以上是用typescript定义的指令，在模板中可利用以下标签使用这一指令：

<div tooltip="42">Tell me the answer!</div>    

        当用户鼠标移动到标签，angular将会调用定义在指令装饰器@HostListener中的方法。最后，overlay上的open方法就会被执行。

2  组件

@Component({
    selector:'hello-world',
    template:'<h1>Hello,{{this.target}}!</h1>'
})
class HelloWorld{
    target:string;
    constructor(){
        this.target='world';
    }
}

        以上是用typescript定义的组件，如果要使用它，可以在视图中嵌入以下标签：

<hello-world></hello-world>

        当angular2应用启动的时候，框架将会遍历DOM树中的所有组件并处理它们。一旦发现这个叫作hello-world的标签，框架就会去调用组件定义中的逻辑，也就是说组件的模板会被渲染出来，花括号之间的表达式被运算。最终获得的结果就是<h1>Hello,world!</h1>这样一个标签。

3  管道

@Pipe({name:'lowercase1'})
class LowerCasePipe1 implements PipeTransform{
    transform(value:string):string{
        if(!value) return value;
        if(typeof value !== 'string'){
            throw new Error('Invalid pipe value',value);
        }
        return value.toLowerCase();
    }
}

        以上是用typescript定义的名为lowercase1的管道，它的作用是把参数传递进来的字符串转换成小写形式。可用以下方式在组件中使用lowercase1管道：

@Component({
    selector:'app',
    pipes:[LowercasePipe1],
    template:'<h1>{{"SAMPLE"|lowercase1}}</h1>'
})
class App {}

        用以下标签来使用App组件：

<app></app>

        将会在屏幕上看到h1标签内部的sample这个单词。

        typescript语法中实现了pipeTransform接口，定义了接口中声明的transform方法。

4  服务

@Injectable()
class User {
    constructor(private service:HttpService){}
    save() {
        return this.service.post('/users')
            .then(res => {
                this.id=res.id;
                return this;
            });
    }
}