Getting ID of detail-page instance that is currently open


#1

To handle how PushNotifications are shown to my users while the app is open, I need to identify, which page the user is currently on. I can do that by:

if ( (this.navCtrl.getActive().component === Page1) ){
    // user is currently on Page1
    // handle push notification
}

Unfortunately, this is not enough. Page 1 is a detail page, which shows details of an item. Let’s say there are 3 items: Banana (id: 1), Apple (id: 2) and Orange (id: 3).

I know need to know, whether the user is currently looking at Page1 for item1, item2 or item3. I want to do something like this:

if ( (this.navCtrl.getActive().component === Page1 && data.itemID === "page1-itemId") ){
    // data.itemID is the ID i get from the push notification
    // "page1-itemId" is what I desire to get somehow
}

How could I find out about page1-itemId?


#2

Page1 knows what item it is showing, so why not delegate the question of how to handle the notification to the page instead of having a global monolithic dispatch function?


#3

That sounds charming @rapropos. Up to now, I put the logic to handle the notification to my app.component.ts. There I’ve got someting like this:

FCMPlugin.onNotification( data => {

    if(data.wasTapped){
      // Handle notification that was received on device tray and tapped by the user.

    } else{
      // Handle notification that was received in foreground.
      // My logic depending on which item is shown...

      if ( (...) ){
        
      } 
    }
  });

Would you just move this code from app.component to Page1? I wasn’t sure if it would be called there anytime a new notification comes in, even if the user didn’t even open Page1.
Or would you somehow split the code between Page1 and app.components?


#4

@rapropos: How would you delegate the question how to handle the notification to the page? I’m not sure how to do this, properly.


#5

Just in case, anybody will struggle with the same thing: I decided to use Events for this purpose.

Whenever Page1 is opened, I publish an Event like this:

Page1.ts

constructor(...
     public events: Events
) {
     // read NavParams
     this.itemId= this.navParams.get('itemId');

     // publish event with current itemId
     this.events.publish("Page1:opened",this.itemId);
}

Then I listen to this event in my app.component.ts

// Listen to Opening of Confirm-Page
this.events.subscribe('Page1:opened', itemId=> {
   this.page1ItemId= itemId;
});

… and use this.page1ItemId in combination with this.nav.getActive().component === Page1 to handle the notification the way I want to.