CODEWITHSUNDEEP
angularionic2onesignal
Skizo-ozᴉʞS ツ
Skizo-ozᴉʞS ツ

Reputation: 20626

$broadcast $on in angular 2

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....

Upvotes: 2

Views: 248

Answers (2)

hendrathings
hendrathings

Reputation: 3765

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) => {
. . .
}

Upvotes: 3

mitopalov
mitopalov

Reputation: 88

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.

Upvotes: 2

Related Questions