Question

我为该属性创建了自己的装饰器，它将自动将属性的值与firebase db同步。我的装饰很简单，看起来像这样：

export function AutoSync(firebasePath: string) {
    return (target: any, propertyKey: string) => {
        let   _propertyValue = target[propertyKey];

        // get reference to db
        const _ref           = firebase.database().ref(firebasePath);

        // listen for data from db
        _ref.on('value', snapshot => {
            _propertyValue = snapshot.val();
        });

        Object.defineProperty(target, propertyKey, {
            get: () => _propertyValue,
            set: (v) => {
                _propertyValue = v;
                _ref.set(v);
            },
        });
    }
}

我这样使用它：

@AutoSync('/config') configuration;

它（几乎）就像一个魅力。我的configuration属性自动与路径/config上的firebase db对象同步。属性设置器自动更新db中的值 - 效果很好！

现在出现问题：当firebase数据库中的某个其他应用程序正在更新数据库中的值时，我们获取了快照，并且_propertyValue的值正在被正确更新，但不会触发changeDetection configuration财产不会直接改变。

所以我需要手动完成。我正在考虑从装饰器中的函数触发变换检测器，但我不确定如何将变换检测器的实例传递给装饰器。

我进行了一次解决：在app.component的构造函数中，我保存了对全局窗口对象中的更改检测器实例的引用：

constructor(cd: ChangeDetectorRef) {
    window['cd'] = cd;

    (...)
}

现在我可以在我的AutoSync装饰器中使用它，如下所示：

// listen for data from db
_ref.on('value', snapshot => {
    _propertyValue = snapshot.val();
    window['cd'].detectChanges();
});

但这是一种hacky and dirty解决方案。什么是正确的方法？

Answer 1

没有好的方法将类属性值传递给装饰器。保存提供者对全局变量的引用不仅是hacky而且是错误的解决方案，因为可能有多个类实例，因此可能有多个提供者实例。

属性装饰器在类定义上被评估一次，其中target是类prototype，并且期望在那里定义propertyKey属性。 _ref和_propertyValue对于所有实例都相同，即使组件从未实例化，也会调用并监听_ref.on。

解决方法是在类实例上公开所需的提供程序实例 - 或者injector如果应该在装饰器中访问多个提供程序。由于每个组件实例都应该设置自己的_ref.on侦听器，因此应该在类构造函数或ngOnInit挂钩中执行。从属性装饰器修补构造函数是不可能的，但应修补ngOnInit：

export interface IChangeDetector {
  cdRef: ChangeDetectorRef;
}

export function AutoSync(firebasePath: string) {
  return (target: IChangeDetector, propertyKey: string) => {
    // same for all class instances
    const initialValue = target[propertyKey];

    const _cbKey = '_autosync_' + propertyKey + '_callback';
    const _refKey = '_autosync_' + propertyKey + '_ref';
    const _flagInitKey = '_autosync_' + propertyKey + '_flagInit';
    const _flagDestroyKey = '_autosync_' + propertyKey + '_flagDestroy';
    const _propKey = '_autosync_' + propertyKey;

    let ngOnInitOriginal = target['ngOnInit'];
    let ngOnDestroyOriginal = target['ngOnDestroy']

    target['ngOnInit'] = function () {
      if (!this[_flagInitKey]) {
        // wasn't patched for this key yet
        this[_flagInitKey] = true;

        this[_cbKey] = (snapshot) => {
          this[_propKey] = snapshot.val();
        };

        this[_refKey] = firebase.database().ref(firebasePath);
        this[_refKey].on('value', this[_cbKey]);
      }

      if (ngOnInitOriginal)
        return ngOnInitOriginal.call(this);
    };

    target['ngOnDestroy'] = function () {
      if (!this[_flagDestroyKey]) {
        this[_flagDestroyKey] = true;
        this[_refKey].off('value', this[_cbKey]);
      }

      if (ngOnDestroyOriginal)
        return ngOnDestroyOriginal.call(this);
    };

    Object.defineProperty(target, propertyKey, {
      get() {
        return (_propKey in this) ? this[_propKey] : initialValue;
      },
      set(v) {
        this[_propKey] = v;
        this[_refKey].set(v);
        this.cdRef.detectChanges();
      },
    });

  }
}

class FooComponent implements IChangeDetector {
  @AutoSync('/config') configuration;

  constructor(public cdRef: ChangeDetectorRef) {}
}

它被认为是黑客

如何将changeDetectorRef传递给装饰器？

1 个答案: