Ionic 2 - 运行时错误没有导航控制器的提供程序答案

【问题标题】：Ionic 2 - Runtime Error No provider for NavControllerIonic 2 - 运行时错误没有导航控制器的提供程序
【发布时间】：2017-10-27 03:21:44
【问题描述】：

我知道有基于此的类似问题。我相信我的情况略有不同。我正在尝试检查本机存储中的值，如果它是真的。我正在尝试导航到主页。到目前为止，在阅读了几篇文章之后，我知道我将无法使用 NavController 作为依赖注入器。

我也尝试过使用 @ViewChild ，但为此我假设我需要在我将使用的模板中定义一个变量。但是我使用的是 html 模板。我是 Ionic 2 和 Angular 2 的新手，所以请对我放轻松:-)。

还有其他方法可以实现吗？如果你们对此有解决方案，请详细说明。

这是我来自 app.components.ts 的代码（如下）。目前我刚刚评论了 navCtrl 代码。

import { Component,ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
import { NativeStorage } from '@ionic-native/native-storage';
import { NavController } from 'ionic-angular';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html',

})
export class ClassetteApp {
  @ViewChild("appNav") nav: NavController;
  rootPage:any = LoginPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage : NativeStorage) {
    platform.ready().then(() => platform.ready().then(() => {
       this.nativeStorage.getItem("userId").then(function(data){
        this.nav.push(HomePage);
        },function(error){
         this.nav.push(LoginPage);
        })
      statusBar.styleDefault();
      splashScreen.hide();
    })
    )}
}

这是我的 app.html。

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

【问题讨论】：

check here 你不能注入 NavController 因为任何作为导航控制器的组件都是根组件的子组件，所以它们不能被注入。跨度>
@sebaferreras，感谢您指出 app.html，我完全错过了。现在我已经实现了@ViewChild，我得到另一个错误Uncaught (in promise): TypeError: Cannot read property 'nav' of undefined 我只有在添加这行代码this.nav.push(LoginPage); 时才会得到这个错误对于错误功能，我是遗漏了什么还是没有正确使用它。出现错误时，我需要重定向到另一个页面。请指教
在这里尝试将navApp 更改为appNav -> @ViewChild("appNav") nav: NavController;
非常感谢！.. 真是愚蠢到竟然忽略了这一点！
去过那里，已经完成了大声笑请接受 suraj 的回答，以便我们可以关闭这个问题 :)

标签： ionic2

【解决方案1】：

检查here。 您不能注入 NavController，因为作为导航控制器的任何组件都是根组件的子组件，因此它们不能被注入。

你的身份证有误。

@ViewChild('appNav') nav: NavController

它应该与您在 html 中提供的#appNav id 相同。

最后，您使用常规函数作为回调。 this 指向函数对象而不是类。所以它找不到nav。使用Arrow function。

this.nativeStorage.getItem("userId").then((data)=>{
        this.nav.push(HomePage);
        },(error)=>{
         this.nav.push(LoginPage);
        })

【讨论】：

我猜这不是给我的问题的 ID。我纠正了这一点。对于这行代码//this.nav.push(LoginPage); [来自顶部发布的代码示例]，它仍然给我同样的错误。当我将其注释掉时，它工作正常。仍然对此一无所知.. :-(。这是范围问题吗？。有什么建议吗？
哦，对了！感谢您指出！.. 这就像一个魅力！

【解决方案2】：

对该答案的更新，我发现我们可以在下面使用它：确保您拥有最新的 Ionic 版本。 3.3.0。在这里，您不必在 html 模板中添加变量。

import { NavController, Platform } from 'ionic-angular';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild('appNav') nav: NavController;
  loginPage: any = LoginPage;

   /* your code */

   SomeFunction(){
   this.nav.push(loginPage);
  }   
}

【讨论】：