Ionic 3 从 app.component 类重定向到另一个页面 [英] Ionic 3 redirect from app.component class to another page

问题描述

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

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 在这里不起作用，所以我想知道什么会?

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

    }
}

因为在 MyApp{} 下的 app.component.ts 中，当我声明 constructor(public navCtrl:nacNavController) 时出现以下错误:

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>

推荐答案

你应该阅读文档...

从根组件导航

如果您想从根应用程序组件控制导航怎么办?您不能注入 NavController，因为任何作为导航控制器的组件都是根组件的子组件，因此它们不能被注入.

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.

通过向 ion-nav 添加引用变量，您可以使用 @ViewChild 获取 Nav 组件的实例，该组件是一个导航控制器(它扩展了 NavController):

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

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

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>

然后在组件代码中:

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

    }
}

这篇关于Ionic 3 从 app.component 类重定向到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！