学习内容为慕课网Angular教学视频

一、Angular(Typescript)装饰器

1.1 简介

• 装饰器就是一个函数
• 他是一个返回函数的函数
• 它不是angular的特性，他是的一个特性
• 函数的入参分别为 targe、name 和 descriptor
• 执行该函数后，可能返回 descriptor 对象，用于配置 target 对象

1.2 Typescript装饰器的分类：

• 类装饰器 (Class decorators)
• 属性装饰器 (Property decorators)
• 方法装饰器 (Method decorators)
• 参数装饰器 (Parameter decorators)

二、如何实现一个装饰器

2.1 实现一个@Emoji()的装饰器，能够让传入的字符串两边加上标签符合

export function Emoji() {
    return (target: Object, key: string) {
        let val = target[key];      
        const getter = () => {
            return this.val;
        };  
        const setter = () => {
            val = `表情${value}表情`
        };
        Object.defineProperty(target, key, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        })
    }
}

## 如何使用
+ @Emoji() Result = 'hello';
+ {{ result }} 页面显示为：表情hello表情

2.1 实现一个@Confirmable()装饰器， 弹窗确认对话框

export function Confirmable(message: string) {
    return (target: Object, key: string, descriptor: PropertyDescriptor) {
        const origin = descriptor.value;
        descriptor.value = function(...args:any) {
            const allow = window.confirm(message);
            if (allow) {
                const result = origin.apply(this, args);
                return result;
            }
            return null;
        };
        
        return descriptor;
    }
}

## 在方法前加上这个装饰器
@Confirmable('确定要点击吗')
handlerClick() {
    console.log('click');
}
## 效果
触发handlerClick前会出现一个弹窗，点击确认后才会继续输出click。

三、Angular中装饰器的种类

• 参考：https://angular.cn/api?status=stable&type=decorator

在Angular中提供了以下19个内置的装饰器

四、学习内容

• 《Angular 2 Decorators(装饰器) - part 1》：https://github.com/semlinker/angular2-ionic2/issues/9

• 《Angular 2 Decorators(装饰器) - part 2》：https://segmentfault.com/a/1190000008626579