angular - TypeScript 装饰器 - 对象属性的 setter 未被调用

我正在尝试在 Angular 应用中实现 TypeScript 装饰器，以便将数据存储在本地存储中。这是我想要实现的目标

export function Cache() {

    return function (target, key): any {
        // property value
        let _val = target[key];

        // property getter
        const getter = function () {
            const data = localStorage.get(key);
            if (data) {
                return data;
            }
            localStorage.set(key, _val);
            return _val;
        };

        // property setter
        const setter = function (newVal) {
            localStorage.set(key, newVal);
            console.log('Setting',newVal);
            _val = newVal;
        };

        // Create new property with getter and setter
        Object.defineProperty(target, key, {
            configurable: true,
            enumerable: true,
            get: getter,
            set: setter
        });
    };
}

并像这样使用它：组件 1：

....
@Cache() userSession: any = {val:''};

ngOnInit() {
    this.userSession.val = "some val"
  }
....

组件 2：

....
@Cache() userSession: any;

ngOnInit() {
    console.log('Stored value is',this.userSession);
    // expected : {val:'some val'}
    // prints : {val:''}
}
....

所以据我理解，属性设置器只有在对对象本身进行赋值时才会被调用，而不是对它的属性赋值。因此这是可行的，

Object.assign(this.userSession , {val: 'some val'});
or
this.userSession = {val: 'some val'}

console.log(this.userSession) // prints: {val: 'some val'}

但这有点违背了我在这里试图实现的目的。那么问题是，我该如何修改装饰器函数才能做到这一点呢？

this.userSession.val = 'some val';

任何建议都 appreciated。

答案＃1

我没有以这种方式使用装饰器，但我很确定你需要删除该属性才能替换它，所以将这个改为：

    Object.defineProperty(target, key, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });

对此（用删除包裹）：

if (delete this[key]) {
    Object.defineProperty(target, key, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}