码迷,mamicode.com
首页 > 其他好文 > 详细

[TypeScript] @OnChange for ngOnChanges

时间:2019-05-10 20:39:49      阅读:140      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!