Question

我正在创建一个自定义装饰器，该装饰器将在RxJS事件上运行装饰的函数。

到目前为止，还不错：当函数实际运行时，我的问题就来了：this对象的上下文丢失了。

过去一天，我一直在寻找解决方案，但似乎找不到。

Here is a stackblitz重现该问题。目标是在控制台中查看Angular来的this.name。

Answer 1

我看到您正在尝试在装饰器中的装饰类实例上调用方法。但是，类装饰器不能以这种方式工作。在定义类时调用它们，而不是在实例化时调用它们，因此您不能使用类的实例调用任何东西。

这是您的updated stackblitz。我正在扩展您的类，并在扩展类的构造函数中调用该方法，以便每当实例化装饰类的对象时都将调用它。

Answer 2

请尝试以下代码，它将起作用。听说您只需将其更改为构造函数。

function HelloWorld(): ClassDecorator {
  return function(constructor) {
    constructor.prototype.HelloWorld.apply(new constructor(), null);
  };
}

Answer 3

在https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c中没有

constructor.prototype.HelloWord.apply(this, null);

只需在您的应用工作行中添加注释

使用cosntructor.prototype可以使用ngOnInit，ngOnChanges ...

例如在页面上显示的是

import { environment } from "../environments/environment";
export function NgLog() : ClassDecorator {
  return function ( constructor : any ) {
    if( !environment.production ) {
      // You can add/remove events for your needs
      const LIFECYCLE_HOOKS = [
        'ngOnInit',
        'ngOnChanges',
        'ngOnDestroy'
      ];
      const component = constructor.name;

      LIFECYCLE_HOOKS.forEach(hook => {
        const original = constructor.prototype[hook];

        constructor.prototype[hook] = function ( ...args ) {
          console.log(`%c ${component} - ${hook}`, `color: #4CAF50; font-weight: bold`, ...args);
          original && original.apply(this, args);
        }
      });
    }

  }
}

打字稿自定义装饰器：此上下文

3 个答案: