Ionic 3从app.component类重定向到另一个页面

Question

我收到推送通知消息,一旦收到消息,我想重定向到另一个页面或显示另一个页面而不是主页.

NavController 在这里不起作用,所以我想知道会是什么？

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
            });

    }
}

因为在MyApp {}下的app.component.ts中,当我声明constructor(public navCtrl:nacNavController)然后我收到以下错误:

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

你应该阅读文档 ......

从Root组件导航

如果您想从根应用程序组件控制导航,该怎么办？您无法注入,NavController因为任何作为导航控制器的组件都是根组件的子组件,因此无法注入它们.

通过向其添加引用变量ion-nav,您可以使用@ViewChild获取Nav组件的实例,该组件是导航控制器(它扩展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);
   }
}

所以在你的情况下,你只需要检查你的app.component.html文件是否包含这个(请注意#myNav模板变量):

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

然后在组件代码中:

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! :)
            });

    }
}