How to set the 'this' object of a callback function to the container component from a class decorator

Question

Hi i am trying to make a class decorator for my server services so that i can share my services with ease on any component, I have a func called 'onUser' that is acting as a callback when ever i get the user data from the server but trying to access 'this' to the callbach that i call on the decorator shows that 'this' is different to the 'this' of the container component what am i missing? thanks

class decorator

export function UserSubscriber() {
  return (constructor: any) => {
    const component = constructor.name;

    const userService: UserClientService = 
               InjectorInstance.get<UserClientService>(UserClientService);

    let subscription: Subscription;

    subscription = userService.user$.subscribe(function(user) {
      constructor.prototype.onUser(user);
    });

    const orgOnInit = constructor.prototype['ngOnInit'];
    constructor.prototype['ngOnInit'] = function (...args) {
      if (orgOnInit) {
        orgOnInit.apply(this, args);
      }
    };

    const orgOnDestroy = constructor.prototype['ngOnDestroy'];
    constructor.prototype['ngOnDestroy'] = function(...args) {
      subscription.unsubscribe();
      if (orgOnDestroy) {
        orgOnDestroy.apply(this, args);
      }
    };
  };
}

component container/callee)

@UserSubscriber()
@Component({
 ...
})
export class AppComponent {
  ...

  onUser(user) {
    console.log(user);

    console.log(this); // this is not the instance of this component
  }
}

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — ConnorsFan, Feb 12 '19 at 02:34
Try defining the callback as an arrow function: `onUser = (user) => { ... }`. — ConnorsFan, Feb 12 '19 at 02:34
By the way, you should include the relevant code as text in the question, not as images. — ConnorsFan, Feb 12 '19 at 02:37

score 0 · Accepted Answer · answered Feb 12 '19 at 04:58

Move your subscription inside ngOnInit override and use arrow function there:

constructor.prototype['ngOnInit'] = function (...args) {
  subscription = userService.user$.subscribe(user => { // preserve this
    constructor.prototype.onUser.call(this, user); // call with component context
  });
  if (orgOnInit) {
    orgOnInit.apply(this, args);
  }
};

Also destroy subscription if it is initialized in ngOnDestroy hook:

constructor.prototype['ngOnDestroy'] = function(...args) {
  if (subscription) {
    subscription.unsubscribe();
  }

  ...
};

How to set the 'this' object of a callback function to the container component from a class decorator

1 Answers1