Ionic 2: AUSNAHME: Kein Provider für NavController

Question

Ich habe ein Problem mit meiner ionic 2/angular 2 App.

Ich habe eine App.ts, wo das Loch "Auth" Teil implementiert ist.

Der Code sieht wie folgt aus:

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

Aber jetzt, wenn ich versuche, die app ich diese Nachricht erhalten laufen:

ORIGINAL EXCEPTION: No provider for NavController 

Haben Sie eine Ahnung, wie dieses Problem zu lösen? Vielen Dank!

Answer 1

Sie haben Ihr Navigationssystem falsch benannt.

this.nav.setRoot(page.component); 

Sollte

this.navCtrl.setRoot(page.component); 

und überprüfen, wenn Ihr richtig

import { NavController} from 'ionic-angular'; 

Answer 2

Importieren Sie nicht die NavController in Ihrem Root-Komponente injizieren kann so sollten Sie es aus, dass entfernen Teil des Codes. Weitere Informationen finden Sie unter here.

Bitte stellen Sie sicher, dass Sie bereits eine Referenzvariable in Ihrem ion-nav haben, wie dies (die #myNav).

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

Und dann können Sie diese Referenz erhalten, indem ViewChild Verwendung Sie können dann zu einer anderen Seite navigieren einfach, unter Verwendung dieser Eigenschaft:

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

Ok, habe ich nur das nav statt Navigation und jetzt funktioniert es

Answer 4

.

Eine Ursache für diesen Fehler ist, wenn Sie versuchen, NavController in eine Provider-Klasse zu injizieren.
So:

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

Ich hatte gerade diesen Fehler ...
nach dieser Injektion zu entfernen (und Refactoring den Code), es funktionierte gut.

Answer 5

Sie können einen NavController in einer Root-Komponente nicht über einen Konstruktor injizieren. So

, im Grunde kann man not etwas tun, wie folgt: -

constructor(private nav: NavController){ 
} 

Und das ist, was Ionic docs zu sagen hat.

Was ist, wenn Sie die Navigation von Ihrer Root-App-Komponente aus steuern möchten? 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.

eine Referenzvariable auf die Ionen nav Durch Hinzufügen Sie @ViewChild verwenden können, um eine Instanz der Nav-Komponente zu erhalten, die eine Navigation-Controller (es reicht NavController)

Answer 6

Es wird empfohlen, Sie this.app.getActiveNavs() verwenden in Ionic 3+ als getActiveNav() wird in der nächsten Hauptversion entfernt werden, so können Sie Ihre Funktion wie folgt geschrieben werden:

auf dem nav Stapel

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

zu drücken, können Sie einfach die Seite importieren (etwa YourPage), dann :

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

Old Verhalten, für Ionic 2, veraltet in ionischen 3:

Sie this.getActiveNav() in Ionic 2 verwenden können (und Ionic 3), so können Sie Ihre Funktion wie folgt geschrieben werden:

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

Bei beiden Methoden benötigen Sie keine Variable import oder private, damit dies funktioniert. Wenn Sie in einem Component sind, beziehen sich nur auf Ihre 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); 
    } 
}