Ionic 2：EXCEPTION：沒有NavController的提供商

Question

我的離子2 /角2應用程序有問題。

我得到了一個app.ts，其中洞「auth」部分是實現的。

的代碼看起來是這樣的：

import {Nav, Platform, Modal, ionicBootstrap} from "ionic-angular"; 
import {NavController} from "ionic-angular/index"; 
import {StatusBar} from "ionic-native"; 
import {Component, ViewChild} from "@angular/core"; 
import {AngularFire, FirebaseListObservable, FIREBASE_PROVIDERS, defaultFirebase} from "angularfire2"; 
import {HomePage} from "./pages/home/home"; 
import {AuthPage} from "./pages/auth/home/home"; 

@Component({ 
    templateUrl: "build/app.html", 
}) 

class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    authInfo: any; 
    rootPage: any = HomePage; 
    pages: Array<{title: string, component: any}>; 

    constructor(private platform: Platform, private navCtrl: NavController, private af: AngularFire) { 
    this.initializeApp(); 

    this.pages = [ 
     { title: "Home", component: HomePage } 
    ]; 

    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
    }); 
    } 

    openPage(page) { 
    this.nav.setRoot(page.component); 
    } 

    ngOnInit() { 
    this.af.auth.subscribe(data => { 
     if (data) { 
     this.authInfo = data; 
     } else { 
     this.authInfo = null; 
     this.showLoginModal(); 
     } 
    }); 
    } 

    logout() { 
    if (this.authInfo) { 
     this.af.auth.logout(); 
     return; 
    } 
    } 

    showLoginModal() { 
    let loginPage = Modal.create(AuthPage); 
    this.navCtrl.present(loginPage); 
    } 
} 

但是現在，當我嘗試運行應用程序，我得到這個消息：

ORIGINAL EXCEPTION: No provider for NavController 

你有任何想法如何解決這個問題？謝謝！

Answer 1

您錯誤地命名了您的導航;

this.nav.setRoot(page.component); 

應該

this.navCtrl.setRoot(page.component); 

並仔細檢查，如果你的導入正確

import { NavController} from 'ionic-angular'; 

Answer 2

你不能在你的根組件注入NavController所以你應該從刪除部分代碼。可以找到更多的信息here。

請確保您已經在ion-nav有一個參考變量，像這樣（的#myNav)：

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

然後你可以通過使用ViewChild該引用那麼你可以瀏覽到另一個頁面，通過使用該屬性：

import { Nav, Platform, ... } from "ionic-angular"; 
// more imports... 
// ... 

@Component({ 
    templateUrl: "build/app.html" 
}) 

class MyApp { 
    @ViewChild('myNav') nav: NavController // <--- Reference to the Nav 

    authInfo: any; 
    rootPage: any = HomePage; 
    pages: Array<{title: string, component: any}>; 

    // Remove the "navCtrl: NavController" from the constructor, since 
    // now your getting the reference from the view 
    constructor(private platform: Platform, private af: AngularFire) { 
    this.initializeApp(); 

    this.pages = [ 
     { title: "Home", component: HomePage } 
    ]; 

    } 

    // ... 

    openPage(page) { 
    // this.navCtrl.setRoot(page.component); <-- Wrong! 
    this.nav.setRoot(page.component) // <-- Right! Use the this.nav property 
    } 

    // ... 
} 

Answer 3

好吧，我只是用NAV來代替NavigationController和現在的作品

Answer 4

。

此錯誤的一個原因是當您嘗試將NavController注入提供程序類時。
像這樣：

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

我只是有這個錯誤...
移除該注射液（和重構代碼）後，它工作得很好。

Answer 5

您無法通過構造函數在根組件中注入NavController。

所以，基本上可以not做類似如下： -

constructor(private nav: NavController){ 
} 

而這正是離子文檔的意見。

如果您想要控制根應用程序組件的導航，該怎麼辦？您無法注入NavController，因爲導航控制器的任何組件都是根組件的子組件，因此它們無法注入。

通過添加參考變量離子NAV，可以使用@ViewChild獲取導航組件，它是一個導航控制器的一個實例（其延伸NavController）

Answer 6

它建議使用this.app.getActiveNavs()在離子3+ getActiveNav（）將在下一主要版本中刪除，那麼你的函數可以寫爲：

showLoginModal() { 
    let loginPage = Modal.create(AuthPage); 
    this.getActiveNavs().slice(-1)[0].present(loginPage); 
} 

推導航堆棧上，你可以導入的頁面（比如YourPage），然後：

this.getActiveNavs()[0].push(YourPage); 

舊行爲，離子2，在離子3棄用：

可以在離子2（和離子3）使用this.getActiveNav()，所以你的函數可以寫爲：

showLoginModal() { 
    let loginPage = Modal.create(AuthPage); 
    this.getActiveNav().present(loginPage); 
} 

無論採用哪種方法，您都不需要任何import或private變量來使其工作。如果你在Component，只是參考你的App：

import {App} from 'ionic-angular'; 
import {MyPage} from '../pages/my/page'; 

@Component() 
export class MyComponent { 
    constructor(private app: App) { 
    } 
    goToMyPage() { 
     this.app.getActiveNav().push(MyPage); 
    } 
}