javascript - 通过装饰器执行方法

Question

我想在 Angular 运行 DI 之后通过装饰器使用当前组件 this 执行函数。

一个例子:

如果在装饰器上执行，我在 this 上没有 translateService

export const TesteDecorator = (actionName): any => {

  return (target?: any, propertyKey?: string): void => {

    Observable.timer(5000).subscribe(() => {
      target[propertyKey](); // when i execute here not have translateService on (this)
    });

  };
};

但是如果在构造函数上执行有 translateService 。

@Component({
  ...
})
export class TesteComponent {

  constructor(
    private translateService: TranslateService
  ) {
    Observable.timer(1000).subscribe(() => {
      this.teste(); // when i execute here translateService is on the (this)
    });
  }

  @TesteDecorator('ACTION')
  teste() {
    console.log(this);
  }

}

有人可以帮助我吗？

Answer 1

问题是装饰器是在类声明时执行的，target 不是类的实例而是原型(prototype)，因此它不会包含任何字段。

解决这个问题的一种方法是包装一个现有函数来调用您的额外代码，并从构造函数中调用该方法:

export const TesteDecorator = (actionName): any => {

    return (target?: any, propertyKey?: string): void => {
        var prevFn: ()=> void = target['testeDecoratorHelper'];
        target['testeDecoratorHelper'] = function() {
            prevFn.call(this);
            setTimeout(() => {
                console.log(propertyKey);
                this[propertyKey](); // when i execute here not have translateService on (this)
            }, 10);
        }   

    };
};

export class TesteComponent {
    constructor(private translateService: TranslateService) {
        this.testeDecoratorHelper();   
        setTimeout(() => {
            this.teste(); // when i execute here translateService is on the (this)
        }, 10);
    }
    testeDecoratorHelper() {
    }
    @TesteDecorator('ACTION')
    teste() {
        console.log(this);
    }
    @TesteDecorator('ACTION')
    teste2() {
        console.log(this);
    }
}

上面的实现不适用于派生类型，但它应该可以帮助您入门。

编辑

因为您使用的是 Angular，所以您也可以使用 ngOnInit 而不是 testeDecoratorHelper，它具有自动调用的优点，因此您不必从构造函数。 (此建议的 estus 的 10 倍)