イオン2 - ランタイムエラーNavControllerのプロバイダがありません

Question

私はこれに基づいて同様の質問があることを理解しています。私は自分のシナリオが少し違うと信じています。私はネイティブストレージの値をチェックしようとしています。私はHomePageにナビゲートしようとしています。これまでにいくつかの記事を読んだら、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> 

Answer 1

チェックhere。 NavControllerを挿入することはできません。ナビゲーションコントローラであるコンポーネントはルートコンポーネントの子であるため、注入することはできません。

あなたは間違ったIDを持っています。

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

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