标签:current back ret sim class ack object === void
Take away from NGCONF talk.
It is a good show case to how to use decorator.
export interface SimpleChange<T> { firstChange: boolean; previousValue: T; currentValue: T; isFirstChange: () => boolean; } function OnChange<T = any>( callback: (value: T, simpleChange?: SimpleChange<T>) => void ) { console.log("callback", callback); const cachedValueKey = Symbol(); const isFirstChangeKey = Symbol(); return (target, key) => { Object.defineProperty(target, key, { set: function(value) { if (this[isFirstChangeKey] === undefined) { this[isFirstChangeKey] = true; } else { this[isFirstChangeKey] = false; } // No operation if new value is same as old value if (!this[isFirstChangeKey] && this[cachedValueKey] === value) { return; } console.log("set value", value); const oldValue = this[cachedValueKey]; this[cachedValueKey] = value; const simpleChange: SimpleChange<T> = { firstChange: this[isFirstChangeKey], previousValue: oldValue, currentValue: this[cachedValueKey], isFirstChange: () => this[isFirstChangeKey] }; callback.call(this, this[cachedValueKey], simpleChange); }, get: function() { return this[cachedValueKey]; } }); }; } class Person { @OnChange<string>(function(newVal, sc) { this.trigger(newVal, sc) }) private name: string = "wan"; trigger (newVal, simpleChange) { console.log(‘newVal‘, newVal); console.log(‘simpleChange‘, simpleChange); } } const p = new Person(); p.name = "aa"; // first time, trigger changes p.name = "aa"; // second time, no trigger p.name = "bb"; // Trogger changes
One take away is that we can use ‘symbol‘ to uqine key.
const cachedValueKey = Symbol(); this[cachedValueKey]
[TypeScript] @OnChange for ngOnChanges
标签:current back ret sim class ack object === void
原文地址:https://www.cnblogs.com/Answer1215/p/10846496.html