CODEWITHSUNDEEP
ionic2
Matt Costa
Matt Costa

Reputation: 217

Navigate to route sent on Push Notification Payload

I have an ionic2 app receiving push notifications from ionic.io. On the notification payload I'm sending the desired route to be navigated to. 

let route = notification.payload.route;

if (route) {
  that.navCtrl.push(route, notification.payload);
}

The problem is that the payload comes as a string, while the navCtrl is expecting to receive the route value. Like myPage from this import:

import { myPage } from '../pages.ts';

What is the best way to convert the string? or if there is a better way to do this, feel free to mention that as well. Thank you.

Upvotes: 0

Views: 641

Answers (1)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

If the navigation options are limited you could use a switch to send the user to the page, like:

let route = notification.payload.route;

if (route) {
  switch(route){
    case 'home':
      that.navCtrl.push(MyHomePage, notification.payload);
      break;

    case 'Users':
      that.navCtrl.push(MyUsersPage, notification.payload);
      break;

    case ...
  }
}

It's not the most beautiful way, but should work.

EDIT - IONIC 3 LAZY LOADING WAY

So since you want to just use a string containing the page selector i think the only way able for you to do this is using lazy loading components.

Before you start, if your project is not on Ionic 3, follow this Changelog steps to upgrade it.

1) You need to delete the pages you want to lazyload from your app.module.ts entryComponents and declatarions, also, of course, delete the page imports. So from this

import { HomePage } from '../pages/home';

@NgModule({
  declarations: [
    MyApp, HomePage
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp, HomePage
  ],
  providers: [
    ...
  ]
})

It'll looks like this:

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    ...
  ]
})

2) On every lazy loaded folder you have 3 files, like

-home
|- home.html
|- home.scss
|- home.ts

And you need to create another file, a home.module.ts

3) On your home.module.ts you'll need this code

import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
    declarations: [HomePage],
    imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }

4) On your home.ts you'll need to import IonicPage decorator and use it above your @Component decorator

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'home',
    templateUrl: 'home.html'
})

5) Now you're ready to use lazy loading, you don't need to import the page and then use it when pushing/poping pages anymore, you need to pass it as a string. So if you used this.navCtrl.push(HomePage, data); now you can use this.navCtrl.push('HomePage', data); and let the deep linking take care of that for you.

If you neeed more information, see this lazy loading doc about how to implement this feature, but as far as i see this is the only way you can use routing with passing a string value.

Hope this helps :)

Upvotes: 2

Related Questions