用于字符串安全和 NgOnchanges 的组件中的 Angular NameOf

Question

比较 NgOnChanges 的最佳方法是什么，同时制作它 字符串类型安全 在 Angular ？目前这就是我正在做的。
NgOnChanges SimpleChanges 变量是数据类型:any 并且接受任何变量名，即使拼写错误。试图找到干净的方法来防止这种情况。
原文:

else if (changes?.product?.previousValue != changes?.product?.currentValue) {
    this.submitSearch();

新:

export const nameof = <T>(name: keyof T) => name;

public readonly productMember = nameof<WebStoreSearchComponent>("product");

if ((changes[this.productMember]?.previousValue != changes[this.productMember]?.currentValue) {
    this.submitSearch();

Angular 是否有任何本地方式来执行此操作？
资源:
https://schneidenbach.gitbooks.io/typescript-cookbook/content/nameof-operator.html
注意:getter/setter 不是解决方案，因为专门询问ngonchanges 的字符串安全。

Answer 1

去年看到this video from ngConf ，建议使用 decorator 的方法对于类似的事情，我认为这很有趣。也许那会帮助你。
这个想法是创建一个装饰器并将它用于所有必需的更改回调。
changes.decorator.ts

export function OnChanges<T>(callback: (newValue: T) => void) {
  const cachedValueKey = Symbol();
  return function(target, key) {
    Object.defineProperty(target, key, {
      set: function(value) {
        if (this[cachedValueKey] === value) {
          return;
        }

        this[cachedValueKey] = value;
        callback.call(this, value);
      },
      get: function() {
        return this[cachedValueKey];
      }
    });
  };
}

在您的情况下的用法:

@OnChanges<string>((newValue: string) => {
  this.submitSearch();
})
@Input()
productMember: string;

看看 this stackblitz .