Ionic-framework: Ionic 2: Events publish/subscribe loses context

[thomaswb]

Short description of the problem:

When subscribing to an Event, providing inline code preserves context, but providing a function loses context.

Given a class function like this:

setFlag() { /* do some stuff here */  }

This works:

this.events.subscribe('hello', ()=>{ this.setFlag(); });

But this fails, with no such function setFlag:

this.events.subscribe('hello', this.setFlag );

In another component:

this.events.publish('hello');

This is problematic, because there's no way to unsubscribe from inline code.

What behavior are you expecting?

I would expect the context to be preserved in the message handler.

Which Ionic Version? 1.x or 2.x

2 beta 11

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v4.2.2
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello! Thanks for opening an issue with us! Would you mind testing to see if you get the same behavior in a plain Angular 2 project? Thanks for using Ionic!

[arsenslyusarchuk]

@thomaswb Using publish/subscribe u have to explicitly bind context or use arrow function like this

this._logoutSub = () => {
  this.goToLoginPage();
};
this.events.subscribe('user:loggedOut', this._logoutSub);

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[thomaswb]

Thanks, @arsenslyusarchuk. That was the answer-- how to bind the context using an arrow function. It's working now.

[emgould]

If you bind explicitly then you can not unsubscribe succesfully.

[morphatic]

Wow. The answer @arsenslyusarchuk provided is NOT obvious. I spent hours trying to figure out why the following didn't work:

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component()
export class MyComponent {
  constructor(private ev: Events) {
    ev.subscribe('someEvent', this.myHandler); // this does NOT work
  }
  private myHandler() {
    // do some stuff, then unsubscribe
    this.ev.unsubscribe('someEvent', this.myHandler);
  }
}

When I change it to the following, it works just fine:

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component()
export class MyComponent {
  constructor(private ev: Events) {
    ev.subscribe('someEvent', this.myHandler); // this does NOT work
  }
  private myHandler = () => {
    // do some stuff, then unsubscribe
    this.ev.unsubscribe('someEvent', this.myHandler);
  }
}

The documentation of the Events API should be updated to explain this. I'll try to get to it soon. In the meantime, it would be really helpful if someone could point me to a good tutorial or other explanation about the difference between arrow functions and non-arrow functions in this particular context.

[kensodemann]

it would be really helpful if someone could point me to a good tutorial or other explanation about the difference between arrow functions and non-arrow functions in this particular context

I believe your issue simply boils down to how this is handled in JavaScript, so hopefully the following explanation will help:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.