Ionic 2: ECCEZIONE: nessun fornitore per NavController

Question

ho un problema con la mia app ionico 2/angular 2.

Ho ottenuto un app.ts in cui la parte "auth" del foro è implementet.

Il codice simile a questo:

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

Ma ora, quando provo a eseguire l'applicazione ottengo questo messaggio:

ORIGINAL EXCEPTION: No provider for NavController 

Avete qualche idea di come risolvere questo problema? Grazie!

Answer 1

Hai chiamato la tua nav in modo errato;

this.nav.setRoot(page.component); 

Dovrebbe essere

this.navCtrl.setRoot(page.component); 

E doppio controllo se il vostro importare correttamente

import { NavController} from 'ionic-angular'; 

Answer 2

Non si può iniettare il NavController nel vostro Root componente così si dovrebbe rimuovere da quel parte del codice. Ulteriori informazioni possono essere trovate here.

Assicurarsi si dispone già di una variabile di riferimento nella vostra ion-nav, come questo (il #myNav):.

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

E poi si può ottenere che il riferimento utilizzando ViewChild È possibile poi basta passare a un'altra pagina, utilizzando tale proprietà:

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, ho appena usato il nav invece di navigationController ed ora funziona

Answer 4

.

Una causa di questo errore si verifica quando si tenta di iniettare NavController in una classe provider.
Ti piace questa:

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

Ho appena avuto questo errore ...
Dopo aver rimosso questa iniezione (e refactoring del codice), ha funzionato bene.

Answer 5

Non è possibile iniettare un NavController in un componente Root tramite un costruttore.

Quindi, in pratica si può not fare qualcosa di simile qui di seguito: -

constructor(private nav: NavController){ 
} 

E questo è ciò che docs ionico ha da dire.

Cosa fare se si desidera controllare la navigazione dal componente dell'app radice? Non è possibile iniettare NavController perché tutti i componenti che sono controller di navigazione sono figli del componente root e quindi non sono disponibili per essere iniettati.

Con l'aggiunta di una variabile di riferimento allo ione-nav, è possibile utilizzare @ViewChild per ottenere un'istanza del componente Nav, che è un controller di navigazione (si estende NavController)

Answer 6

Si consiglia di utilizzare this.app.getActiveNavs() in ionica 3+ come getActiveNav() verrà rimosso nella prossima major release, quindi la funzione può essere scritta come:

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

Per spingere sullo stack di navigazione, si può semplicemente importare la pagina (diciamo YourPage) allora :

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

vecchio comportamento, per ionico 2, deprecato in ionico 3:

È possibile utilizzare this.getActiveNav() in ionico 2 (e ionico 3), quindi la funzione può essere scritta come:

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

Con entrambi i metodi non è necessaria alcuna variabile import o private affinché funzioni. Se siete in un Component, basta consultare la 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); 
    } 
}