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

您应该阅读文档 ...

从“根”组件导航

如果要从根应用程序组件控制导航怎么办？ 您不能注入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! :)
            });

    }
}

Answer 2

我看不出为什么不能像这样使用NavController任何原因：

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