Ionic 2 - Runtime Error Kein Anbieter für NavController

Question

Ich verstehe, dass es ähnliche Fragen basierend darauf gibt. Ich glaube, mein Szenario ist etwas anders. Ich versuche, einen Wert im nativen Speicher zu überprüfen, wenn es wahr ist. Ich versuche, zur HomePage zu navigieren. Nachdem ich einige Artikel gelesen habe, weiß ich, dass ich den NavController nicht mehr als Dependency Injector verwenden kann.

Ich habe auch versucht, @ViewChild, aber dafür nehme ich an, dass ich eine Variable in der Vorlage, die ich verwenden würde definieren würde. Ich verwende jedoch eine HTML-Vorlage. Ich bin neu in Ionic 2 und Angular 2, also gehen Sie bitte ein bisschen einfach zu mir :-).

Irgendeine andere Weise, in der ich das erreichen kann? Bitte erörtern Sie ein wenig mehr, wenn Sie eine Lösung dafür haben.

Dies ist mein Code von app.components.ts (unten). Zur Zeit habe ich gerade den navCtrl-Code kommentiert.

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

hier ist meine app.html.

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

Answer 1

überprüfen here. Sie können NavController nicht injizieren, da alle Komponenten, die Navigationscontroller sind, untergeordnete Elemente der Stammkomponente sind und daher nicht für die Injektion verfügbar sind.

Sie haben die falsche ID.

@ViewChild('appNav') nav: NavController 

Es soll das gleiche wie die #appNav-ID, die Sie in dem HTML-Code gegeben haben.

Schließlich verwenden Sie eine reguläre Funktion als Rückruf. Das this verweist auf ein Funktionsobjekt anstelle der Klasse. So kann es nav nicht finden. Verwenden Sie Arrow function.

Answer 2

Ein Update zu dieser Antwort, ich fand heraus, dass wir das unten verwenden können: Stellen Sie sicher, dass Sie die neueste Ionic-Version haben. 3.3.0. Hier müssen Sie Ihrer HTML-Vorlage keine Variable hinzufügen.

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