使用自定义TS装饰器的组件方法未定义Angular服务

Question

I am trying to add a custom method decorator to an angular component function to add some logging functionality.

The component method that I am decorating internally calls an angular service function I injected into the component. Unfortunately, when running the code the injected service is picked up as undefined.

The example code below:

function myCustomDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalValue = descriptor.value;
  descriptor.value = function(...args: any[]) {
    const result = originalValue.apply(target, ...args);
    //Do some other stuff
    return result;
  }
  return descriptor;
}

@Component()
class myComponentClass implements OnInit {
  constructor(private myService: MyService) {}

  ngOnInit() {
    this.functionIWantToDecorate();
  }

  @myCustomDecorator
  private functionIWantToDecorate() {
    this.myService.someServiceFunction();
  }
}

Causes a "Can't call someServiceFunction of undefined" error. Any ideas on how to get this working?

Answer 1

If you immediately return a descriptor from your decorator, you should not use the braces () . Also the this context is lost, try using the this which is in the descriptor value. Besides that, when you use apply , you should not use the spread operator. If you want to use that, you have to use call :

function myCustomDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalValue = descriptor.value;
  descriptor.value = function(this: Function, ...args: any[]) {
    const result = originalValue.call(this, ...args);
    // or --> const result = originalValue.apply(this, args);
    //Do some other stuff
    return result;
  }
  return descriptor;
}

Answer 2

The problem you are facing is caused by the fact that inside the decorator target is the class not the instance of the class. Decorators are applied on class creation, and thus could not have access to the instance when they are called. You can acces the current object when the function is actually called:

descriptor.value = function(...args: any[]) {
  const result = originalValue.apply(this, ...args); // this not target 
  //Do some other stuff
  return result;
}