Ionic 3 redirect from app.component class to another page

Question

I'm getting push notification messages and once I receive the message, I want to redirect to another page or show another page instead of home page.

NavController doesn't work here, so I was wondering what will?

export class MyApp{

    rootPage:any = HomePage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public push: Push) {

        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
        });


        this.push.rx.notification()
            .subscribe((msg) => {
                alert(msg.title + ': ' + msg.text);
                // I want to redirect to another page with msg object instead of HomePage
            });

    }
}

Because in app.component.ts under MyApp{}, when I declare constructor(public navCtrl:nacNavController) then I get the following error:

Error: Uncaught (in promise): Error: No provider for NavController!
Error: No provider for NavController!
    at injectionError (main.js:1509)
    at noProviderError (main.js:1547)
    at ReflectiveInjector_._throwOrNull (main.js:3048)
    at ReflectiveInjector_._getByKeyDefault (main.js:3087)
    at ReflectiveInjector_._getByKey (main.js:3019)
    at ReflectiveInjector_.get (main.js:2888)
    at AppModuleInjector.NgModuleInjector.get (main.js:3835)
    at resolveDep (main.js:11202)
    at createClass (main.js:11071)
    at createDirectiveInstance (main.js:10899)
    at injectionError (main.js:1509)
    at noProviderError (main.js:1547)
    at ReflectiveInjector_._throwOrNull (main.js:3048)
    at ReflectiveInjector_._getByKeyDefault (main.js:3087)
    at ReflectiveInjector_._getByKey (main.js:3019)
    at ReflectiveInjector_.get (main.js:2888)
    at AppModuleInjector.NgModuleInjector.get (main.js:3835)
    at resolveDep (main.js:11202)
    at createClass (main.js:11071)
    at createDirectiveInstance (main.js:10899)
    at c (polyfills.js:3)
    at polyfills.js:3
    at polyfills.js:3
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

Answer 1

You should read the docs ...

Navigating from the Root component

What if you want to control navigation from your root app component? You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

By adding a reference variable to the ion-nav , you can use @ViewChild to get an instance of the Nav component, which is a navigation controller (it extends NavController ):

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage: any = TabsPage;

   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}

So in your case, you just need to check if your app.component.html file includes this (please notice the #myNav template variable):

<ion-nav #myNav [root]="rootPage"></ion-nav>

And then in the component code:

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

//...
export class MyApp{
    @ViewChild('myNav') nav: NavController
    rootPage: any = HomePage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public push: Push) {

        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
        });


        this.push.rx.notification()
            .subscribe((msg) => {
                alert(msg.title + ': ' + msg.text);
                this.nav.push(TheOtherPage); // <- use it here! :)
            });

    }
}

Answer 2

I don't see any reason why you can't use the NavController like so:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Push, PushToken } from '@ionic/cloud-angular';
import { SomeOtherPage } from '...';

export class HomePage {

  constructor(private push: Push
    public navCtrl: NavController) {
        push.register().then((t: PushToken) => {
          return this.push.saveToken(t);
        }).then((t: PushToken) => {
          console.log('Token saved:', t.token);
        });
        this.push.rx.notification().subscribe((msg) => {
          this.navCtrl.push(SomeOtherPage, { msg: msg });
        });
  }
}