Ionic 2 - 运行时错误没有NavController的提供程序 [英] Ionic 2 - Runtime Error No provider for NavController

问题描述

据我所知，有相似的问题。我相信我的情况略有不同。我试图检查本机存储中的值，如果它是真的。我正试图导航到HomePage。到目前为止阅读了几篇文章后，我知道我无法使用NavController一个依赖注入器。

I understand there are similar questions based on this. I believe my scenario is little different. I am trying to check a value in native storage, if it is true. I am trying to navigate to the HomePage. By now after reading couple of articles,I know i wont be able to use the NavController a dependency injector.

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

I have also tried using @ViewChild , but for that I assume I would need to define a variable in the template that I will use. However I am using an html template. I am new to Ionic 2 and Angular 2, so please go little easy on me :-).

我可以通过其他任何方式实现这一目标吗？如果你们有解决方案，请详细说明。

Any other way in which i can accomplish that? Please elaborate a bit more if you guys have a solution to this.

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

This is my code from app.components.ts (below). Currently I have just commented the navCtrl code.

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。

here is my app.html.

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

推荐答案

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

您的ID错误。

@ViewChild('appNav') nav: NavController

它应该与你在html中给出的 #appNav id相同。

It should be the same as the #appNav id you have given in the html.

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

Lastly you are using a regular function as a callback. The this points to function object instead of the class. So it cannot find nav. Use Arrow function.

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

这篇关于Ionic 2 - 运行时错误没有NavController的提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！