Question

我有类似于以下情况的代码，在这种情况下，我试图基于装饰器替换属性

export function DecorateMe() {
    return function(component: any, propertyKey: string) {
        Object.defineProperty(component, propertyKey, {
            get: () => {
                ...
            },
            set: (value: boolean) => {
                ...
            }
        });
    };
}
class Parent {}

@Component()
class Child extends Parent {
    @DecorateMe()
    public property: string;
}

但是，在运行时，我看到property被定义为正常状态，隐藏了添加到原型中的get/set方法。

根据TypeScript documentation和this tutorial，我希望它能正常工作。

我正在使用Angular，因此不确定是否会产生影响。

Answer 1

看起来您的函数不是用于属性装饰器。使用以下代码：

export function DecorateMe(component: any, propertyKey: string) {
   var _val = component[propertyKey];

  if (delete component[propertyKey]) {
    Object.defineProperty(component, propertyKey, {
        get: () => {
            console.log("Getter called ", _val);
            return _val;
        },
        set: (value: any) => {
            _val = value;
            console.log("Setter called ", _val);
        }
    });
  }
}

属性装饰器无法替换定义？

1 个答案: