Ionic 2 - 運行時錯誤沒有提供NavController

我知道有類似的問題基於此。我相信我的情況有點不同。我試圖檢查本地存儲中的值，如果它是真的。我正在嘗試導航到主頁。在閱讀了幾篇文章之後，我知道我將無法使用NavController依賴注入器。Ionic 2 - 運行時錯誤沒有提供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>

來源

2017-05-26 Arun-

檢查[這裏]（http://ionicframework.com/docs/api/navigation/NavController/）_You不能注入NavController因爲是導航控制器的任何成分都在根組件的兒童，這樣他們AREN 't available to be inject._ –

@sebaferreras，謝謝你指出app.html，我完全錯過了。現在我已經實現了'@ ViewChild'，我得到了另一個錯誤**未捕獲（承諾）：TypeError：無法讀取屬性'nav'的undefined ** 只有當我添加這行代碼'this。 nav.push（LoginPage）;'對錯誤函數，我是否錯過了某些東西或者沒有正確使用它。出現錯誤時，我需要重定向到另一個頁面。請告知 –

嘗試在這裏更改'navApp'到'appNav' - >'@ViewChild（「appNav」）nav：NavController;' – sebaferreras

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

來源

2017-05-26 10:10:16

我猜這不是給我這個問題的ID。我糾正了這一點。它仍然給我這行代碼'//this.nav.push（LoginPage）;'[來自頂部的代碼示例]相同的錯誤。當我評論它，它工作正常。還是一無所知.. :-(。它是一個範圍問題？任何建議？ –

哦，對了！感謝您指出它！..工作像一個魅力!! –

很高興它被解決:) –

對該答案的更新，我發現我們可以在下面使用它：確保您擁有最新的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); 
    } 
}

來源

2017-05-28 18:25:47

Ionic 2 - 運行時錯誤沒有提供NavController

回答

相關問題