离子2:例外:没有NavController的提供程序 [英] Ionic 2: EXCEPTION: No provider for NavController

问题描述

我的离子2/角2应用程序有问题.

i have a problem with my ionic 2/angular 2 app.

我有一个app.ts，其中的身份验证"部分是工具集.

I got an app.ts where the hole "auth" part is implementet.

代码如下:

 import {Nav, Platform, Modal, ionicBootstrap} from "ionic-angular";
import {NavController} from "ionic-angular/index";
import {StatusBar} from "ionic-native";
import {Component, ViewChild} from "@angular/core";
import {AngularFire, FirebaseListObservable, FIREBASE_PROVIDERS, defaultFirebase} from "angularfire2";
import {HomePage} from "./pages/home/home";
import {AuthPage} from "./pages/auth/home/home";

@Component({
  templateUrl: "build/app.html",
})

class MyApp {
  @ViewChild(Nav) nav: Nav;

  authInfo: any;
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(private platform: Platform, private navCtrl: NavController, private af: AngularFire) {
    this.initializeApp();

    this.pages = [
      { title: "Home", component: HomePage }
    ];

  }

  initializeApp() {
    this.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();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  ngOnInit() {
    this.af.auth.subscribe(data => {
      if (data) {
        this.authInfo = data;
      } else {
        this.authInfo = null;
        this.showLoginModal();
      }
    });
  }

  logout() {
    if (this.authInfo) {
      this.af.auth.logout();
      return;
    }
  }

  showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.navCtrl.present(loginPage);
  }
}

但是现在，当我尝试运行该应用程序时，我收到以下消息:

But now, when i try to run the app i get this message:

ORIGINAL EXCEPTION: No provider for NavController

您知道如何解决此问题吗?谢谢！

Do you have any idea how to solve this problem? Thanks!

推荐答案

您不能通过构造函数将NavController注入Root组件中.

You can not inject a NavController in a Root component via a constructor.

因此，基本上，您可以not进行如下操作:-

So, basically you can not do something like below:-

constructor(private nav: NavController){
}

这是注入NavController的方式

This is how you can inject a NavController

@Controller({
  ....
})
class MyApp{
  @ViewChild('nav') nav: NavController;
  ....
  ....
  constructor(...){ // See, no NavController here
  }
  ....
}

这就是Ionic文档必须说的.

And this is what Ionic docs has to say.

如果要从根应用程序组件控制导航怎么办?您无法注入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)

这篇关于离子2:例外:没有NavController的提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！