学习内容为慕课网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中装饰器的种类
在Angular中提供了以下19个内置的装饰器
| 装饰器类型 | 内置装饰器 |
|---|---|
| 类装饰器 5个 | @Component、@NgModule、@Pipe、@Injectabl、@Directive |
| 属性装饰器 6个 | @Input、@Output、@ContentChild、@ContentChildren、@ViewChild、@ViewChildren |
| 方法装饰器 2个 | @HostListener、@HostBinding |
| 参数装饰器 6个 | @Attribute、@Inject、@Optional、@Self、@SkipSelf、@Host |
四、学习内容
《Angular 2 Decorators(装饰器) - part 1》：https://github.com/semlinker/angular2-ionic2/issues/9
《Angular 2 Decorators(装饰器) - part 2》：https://segmentfault.com/a/1190000008626579
