没有 NavController 的提供者答案

【问题标题】：No provider for NavController没有 NavController 的提供者
【发布时间】：2017-03-01 02:52:31
【问题描述】：

我从 sidemenu 启动器启动了一个 ionic 2 应用程序。现在我想将生成到应用程序组件（菜单）中的代码移动到一个文件夹中，并改为编写一个主组件。当我运行该应用程序时，它向我显示此错误：

原始异常：没有 NavController 的提供程序！

我的 app.component 的代码是：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { Login } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  nav: NavController;

  constructor(public platform: Platform, nav: NavController) {
    this.nav = nav;
    this.initializeApp();
  }

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

  registerUserWithFacebook(){
    console.log('Facebook');
    //this.nav.setRoot(pantryList);
  }

  registerUserWithGoogle() {
    console.log('Google');
    //this.nav.setRoot(pantryList);
  }

  openSignUpPage(){
    console.log('Signup');
    //this.nav.setRoot(Signup);
  }

  openLoginPage(){
    console.log('Login');
    this.nav.push(Login);
  }

  openTermsOfService(){
    console.log('Terms of service');
  }
}

我想重定向到我的菜单（sidemenu）页面：

import {Component} from "@angular/core";
import { NavController } from 'ionic-angular';

import { pantryList } from '../pantryList/pantryList';

@Component({
    templateUrl: "login.html"
})
export class Login {

    email: string;
    password: string;

    constructor(public navCtrl: NavController) {
    }

   onLogin() {
      this.navCtrl.setRoot(pantryList);
   }    
}

【问题讨论】：

标签： angular navigation ionic2

【解决方案1】：

我通过解决方法解决了这个问题。我正在阅读，我发现 this 发布了一些类似的问题。

所以我只是把我的 app.html 改成这样：

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

而我的 app.component 变成了这个：

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild('content') nav: Nav;

  rootPage: any = Home;
  ...
}

现在，当我在主页重定向时，我没有任何问题。

【讨论】：

自我回答，好:)
谢谢 :) 努力找到这项工作，但我现在很高兴
NavController 只是 Nav 的一个子类。您确实需要将您的 Nav ViewChild 放入 app.component.ts 并从那里您可以将其传递给另一个组件以在那里处理您的导航。一如既往地注意循环依赖。

【解决方案2】：

强迫那个东西以下一个方式工作

  constructor(
    protected app: App
  ) {

...

  get navCtrl(): NavController {
    return this.app.getActiveNav();
  }

【讨论】：

回答最初的问题，可以忽略navCtrl函数，使用：onLogin() { this.app.getActiveNav().setRoot(pantryList); }。 App 是从 ionic-angular 导入的。

【解决方案3】：

上述解决方案有效。另外，如果您遇到和我一样的情况，请检查以下内容。

当我不小心在 Injectable Provider 文件中添加了 NavController 时，我遇到了同样的错误。

@Injectable()
export class UtilsProvider {

  constructor(
    private toastCtrl: ToastController,
    public loadingCtrl: LoadingController,
    public navCtrl: NavController // *** Make sure to remove this line from Providers***
  ) {
    console.log("Hello UtilsProvider");
    if (!this.isDev) console.log("Productions build");
  }
}

【讨论】：