Angular自定义装饰器

Angular装饰器说白了就是一个函数，是一个返回函数的函数
一、自定义属性型装饰器
1、属性型装饰器是作用于class类属性上的。下例自定义smile（）装饰器

export function smile() {
    return (target:any,key:string) =>{
        let val = target[key];
        let getter=()=>{
            return val
        }
        let setter = (value:string) => {
                val = `😊${value}😊`
        }
        Object.defineProperty (target,key,{
            set: setter,
            get: getter,
            configurable:true
        })
    } 
}

在这里，补充一下Object.defineProperty的知识：
Object.key（），效果类似for…in ，遍历对象属性，返回一个由属性名组成的数组。
Object.defineProperty(obj,prop,descriptor)定义对象中新属性或修改原有的属性，obj：必填，目标对象。prop：必填，需定义或修改的属性的名字。descriptor：必填，目标属性所拥有的特性。以对象形式{}书写，value：设置属性的值，默认为undefined，writable：值是否可以重写。true|false默认为false。enumerable：目标属性是否可以被枚举。true|false默认为false。configurable：目标属性是否可以被删除或是否可以再次修改特性true|false，默认为false。
2、将装饰器作用于属性上

export class TreeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  @smile() tree:string="哈哈"
  @smile() defaultCheckedKey = ['0-0', '0-0-0', '0-0-1']
}

效果

二、自定义方法型装饰器
方法型装饰器和属性型装饰器类似，定义时，需增加PropertyDescriptor类型传入。如下例，PropertyDescriptor.value表示注解的方法，先将它存入变量ori中。然后将想要在注解函数执行前要执行的函数赋值给PropertyDescriptor.value，当这个函数执行完毕后，再判断是否执行存入变量ori被注解的函数。

export function dialog(mess:string) {
    return (target: any, key: string,describle:PropertyDescriptor) => {
        let ori = describle.value;
        describle.value=function(...args:any){
            let allow = window.confirm(mess);
            if(allow){
                let result = ori.apply(this,args)
                return result
            }
            return null
        }
        return describle;
    }
}

export class TreeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  @smile() tree:string="哈哈"
  @smile() defaultCheckedKey = ['0-0', '0-0-0', '0-0-1']
  @dialog("弹出对话框")
  sudu(){
    console.log("哈哈哈哈")
  }
}

  <button (click)="sudu()">点击我</button>

效果
点击确定，执行被注解函数，输出"哈哈哈哈"


点击取消，不执行被注解函数，什么也不输出