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

    }
}

因为在app.component.ts中在MyApp {}下，当我声明构造函数（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屋！