Ionic 2 - 运行时错误 NavController 没有提供程序

Question

我知道有类似的问题基于此。我相信我的情况几乎没有什么不同。我正在尝试检查本机存储中的值，如果它是真的。我正在尝试导航到主页。到现在为止，在阅读了几篇文章之后，我知道我将无法使用 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();
    })
    )}
}

这是我的应用程序.html。

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

Answer 1

在这里检查。无法注入 NavController ，因为作为导航控制器的任何组件都是根组件的子组件，因此无法注入它们。

您的 ID 错误。

@ViewChild('appNav') nav: NavController

它应该与您在 html 中给出的#appNav ID 相同。

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

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

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