$broadcast $on in angular 2

Question

I'm trying to implement $broadcast and $on in >ionic2 and I found this solution here in Stackoverflow

using $on and $broadcast with angular js 2 , well I thought it was working perfect, since now.

I've implemented oneSignal like this :

var iosSettings = {};
iosSettings["kOSSettingsKeyAutoPrompt"] = true;
iosSettings["kOSSettingsKeyInAppLaunchURL"] = false;
window["plugins"].OneSignal.startInit("123123", "123123")
.inFocusDisplaying(window["plugins"].OneSignal.OSInFocusDisplayOption.None)
.iOSSettings(iosSettings)
.handleNotificationReceived(function (jsonData) {
    alert(JSON.stringify(jsonData));
    if (jsonData["payload"] != null && jsonData["payload"]["additionalData"] != null) {
        alert("first"); //<------ FIRST ALERT
        var data = jsonData["payload"]["additionalData"];
        notificationOpenedCallback(data);
    }
})
.handleNotificationOpened(function (jsonData) {
    if (jsonData["notification"] != null && jsonData["notification"]["payload"] != null) {
        var data = jsonData["notification"]["payload"]["additionalData"];
        notificationOpenedCallback(data);
    }
})
.endInit();

My notificationOpenedCallback(data) has this on its body

var notificationOpenedCallback = function (jsonData) {
                if (jsonData != null) {
                    if (jsonData["type"] == "example") {
                        alert("second"); //<------ SECOND ALERT
                        this.sharedService.broadcast({
                            name: 'example'
                        });
                    }

Since here is OK, the problem comes when I'm from the other page...

this.sharedService.on('example', (event) => {
            alert("pewpew"); // <--- 3RD ALERT
        });

I don't get what I'm doing wrong I have an Ionic1 app and I hace the same code, the only different thing is that I've created the sharedServiceProvider to "emulate" the $broadcast and $on, this is my class

export class SharedServiceServiceProvider {
  observable: any;
  observer: any;   
  constructor() {
    this.observable = Observable.create(observer => {
      this.observer = observer;
    }).share();
  } 
  broadcast(event) {
    this.observer.next(event);
  } 
  on(eventName, callback) {
    this.observable.filter((event) => {
      return event.name === eventName;
    }).subscribe(callback);
  }  
}

Problem

I'm able to see the FIRST, SECOND alert, but not the 3rd one.

EDIT

I've created a sample demo here on GitHub-oneSignal-ionic2. The only thing you have to do (if you wanna play with that) is change the OneSignal key and create a template for your notification.

UPDATE EDIT

I've changed the .handleNotificationOpened(function (jsonData) { to .handleNotificationOpened((jsonData) => { now, the alert() is shown, BUT the problem is that I have something like this :

this.sharedService.on('example', (event) => {
            alert("test");
            this.showStatus();
            this.getActiveGuy(function () {
            });
        });

But seems like those 2 methods are called but not doing the job, those methos do a refresh of the page and it does not... and I have to make the refresh (Scroll to down) and then it refreshes, BUT that's why on my onRefresh() I have those methods....

Do you have any repository with stripped-down code to reproduce it? — yurzui, Mar 09 '18 at 06:11
Are you sure that `this.sharedService.broadcast` is called without any errors? Maybe you got cannot read property `broadcast` of `undefined`? I would suggest you using arrow function to keep correct `this` — yurzui, Mar 09 '18 at 15:43
Something like `var notificationOpenedCallback = (jsonData) => {` — yurzui, Mar 09 '18 at 17:23
@yurzui The posted answer pinpoints the problem, but does not give the 'proper' solution, which is using the arrow function. You should post that an an answer — David, Mar 14 '18 at 11:14
@yurzui see my edit let me know if you have an answer to this :( — Skizo-ozᴉʞS ツ, Mar 14 '18 at 19:32
If it still doesn't update UI you can try running code inside angular zone through `ngZone.run` — yurzui, Mar 15 '18 at 19:44
I had the same code in Ionic1 and I had problems and I solved it doing `$digest()` something to do with this? — Skizo-ozᴉʞS ツ, Mar 15 '18 at 19:52

score 3 · Answer 1 · answered Mar 15 '18 at 08:06

This is issue from this is undefined which is not call this.sharedService.

In javascript it known by lexical scoping, let's quotes this blog:

The ES6 arrow function syntax uses “lexical scoping” to figure out what the value of “this” should be. Lexical scoping is fancy way of saying it uses “this” from the surrounding code… the code that contains the code in question.

or from typescript documentation:

Good/bad: This creates an additional closure per method per instance of the class. If this method is usually only used in regular method calls, this is overkill. However, if it's used a lot in callback positions, it's more efficient for the class instance to capture the this context instead of each call site creating a new closure upon invoke.

simply to fix your problem is (as mention by yurzui comment also):

var notificationOpenedCallback = function (jsonData) {
. . .
}

to:

let notificationOpenedCallback = (jsonData) => {
. . .
}

See my update edit, I did it but the problem is that is not "refreshing" or not updating UI I don't know why — Skizo-ozᴉʞS ツ, Mar 15 '18 at 09:08

score 2 · Answer 2 · edited Mar 14 '18 at 19:06

2

Problem is here

var notificationOpenedCallback = function (jsonData) {
    if (jsonData != null) {
       if (jsonData["type"] == "example") {
            alert("second"); //<------ SECOND ALERT
            this.sharedService.broadcast({
                name: 'example'
            });
        }

The this keyword is referencing the notificationOpenedCallback function and it can not access the sharedService. What you can do is move this function notificationOpenedCallback(data) to the class object and that should solve the issue.

edited Mar 14 '18 at 19:06

David Walschots

12,279
5
36
59

answered Mar 12 '18 at 19:32

mitopalov

92
1
2

Nice work finding the problem. You should take a look at the last comment on the question (by David) and update your answer with the solution too. – Narm Mar 14 '18 at 16:19

$broadcast $on in angular 2

Problem

EDIT

UPDATE EDIT

2 Answers2