如何将 changeDetectorRef 传递给装饰器?

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 中的值 - 效果很好！

现在的问题是：当数据库中的值被其他应用程序在Firebase DB中更新时，我们得到了snapshow并且_propertyValue的值正在正确更新，但是由于configuration属性没有直接更改，因此不会触发changeDetection。

所以我需要手动执行此操作。我正在考虑从装饰器中的函数触发更改检测器，但我不确定如何将更改检测器的实例传递给装饰器。

我来了一个四处走动：在app.component的构造函数中，我将对全局窗口对象中更改检测器实例的引用保存下来：

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

现在我可以像这样在我的AutoSync装饰器中使用它：

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

但这是一种肮脏和肮脏的解决方案。正确的方法是什么？

Answer 1

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

属性装饰器在类定义上被计算一次，其中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) {}
}

它被认为是黑客