Ionic 2:EXCEPTION:没有NavController的提供者

Question

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

我得到了一个应用程序,其中"auth"部分是实现的.

代码如下所示:

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

但现在,当我尝试运行应用程序时,我收到此消息:

ORIGINAL EXCEPTION: No provider for NavController

你知道如何解决这个问题吗？谢谢!

Answer 1

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

所以,基本上你可以not做以下的事情: -

constructor(private nav: NavController){
}

这是注入NavController的方法

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

这就是Ionic docs所说的.

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

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

Answer 2

您不能NavController在根组件中注入,因此您应该从代码的该部分中删除它.更多信息可以在这里找到.

请确保您已经有一个参考变量ion-nav,如下所示(#myNav):

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

然后你可以通过使用获得该参考ViewChild.然后,您可以使用该属性导航到另一个页面:

import { Nav, Platform, ... } from "ionic-angular";
// more imports...
// ...

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

class MyApp {
  @ViewChild('myNav') nav: NavController // <--- Reference to the Nav

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

  // Remove the "navCtrl: NavController" from the constructor, since
  // now your getting the reference from the view
  constructor(private platform: Platform, private af: AngularFire) {
    this.initializeApp();

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

  }

  // ...

  openPage(page) {
    // this.navCtrl.setRoot(page.component); <-- Wrong!
    this.nav.setRoot(page.component) // <-- Right! Use the this.nav property
  }

  // ...
}

Answer 3

建议您this.app.getActiveNavs()在Ionic 3+中使用,因为getActiveNav()将在下一个主要版本中删除,因此您的函数可以写成:

showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.getActiveNavs().slice(-1)[0].present(loginPage);
}

要推送导航堆栈,您只需导入页面(比如说YourPage):

this.getActiveNavs()[0].push(YourPage);

Ionic 2的旧行为,在Ionic 3中弃用:

你可以this.getActiveNav()在Ionic 2(和Ionic 3)中使用,所以你的功能可以写成:

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

无论使用哪种方法,您都不需要任何import或private变量来实现此功能.如果你在Component,请参考你的App:

import {App} from 'ionic-angular';
import {MyPage} from '../pages/my/page';

@Component()
export class MyComponent {
    constructor(private app: App) {
    }
    goToMyPage() {
        this.app.getActiveNav().push(MyPage);
    }
}

Answer 4

您的导航命名错误；

this.nav.setRoot(page.component);

应该

this.navCtrl.setRoot(page.component);

并仔细检查您的导入是否正确

import { NavController} from 'ionic-angular';