Ionique 2: EXCEPTION: Pas de fournisseur pour NavController

j'ai un problème avec mon ionique 2/angulaire 2 app.

J'ai une application.ts où le trou "auth" la partie est implementet.

Le code ressemble à ceci:

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

Mais maintenant, quand j'essaye d'exécuter l'application, j'obtiens ce message:

ORIGINAL EXCEPTION: No provider for NavController

Avez-vous une idée de comment résoudre ce problème? Merci!

OriginalL'auteur Fargho | 2016-06-30

19

Vous ne pouvez pas injecter un NavController dans un composant Racine via un constructeur.

Donc, fondamentalement, vous pouvez not faire quelque chose comme ci-dessous:-
```
constructor(private nav: NavController){
}
```
C'est comment vous pouvez injecter un NavController
```
@Controller({
....
})
class MyApp{
@ViewChild('nav') nav: NavController;
....
....
constructor(...){ //See, no NavController here
}
....
}
```
Et c'est ce Ionique docs a à dire.

Si vous souhaitez contrôler la navigation à partir de la racine de votre application composant? Vous ne pouvez pas injecter NavController parce que tous les composants qui sont les contrôleurs de la navigation sont des enfants de la racine de composants de sorte qu'ils ne sont pas disponibles à être injecté.

Par l'ajout d'une variable de référence pour l'ion-nav, vous pouvez utiliser @ViewChild pour obtenir une instance de la valeur liquidative de la composante, qui est une manette de navigation (elle s'étend NavController)

OriginalL'auteur Mav55

Vous ne pouvez pas injecter le NavController dans votre Composant Racine de sorte que vous devriez le supprimer de cette partie du code. Plus d'informations peuvent être trouvées ici.

Veuillez assurez-vous que vous disposez déjà d'une variable de référence dans votre ion-nav, comme ceci (le #myNav):

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

Et puis, vous pouvez obtenir la référence à l'aide de ViewChild. Vous pouvez ensuite il suffit de naviguer vers une autre page, en utilisant la propriété:

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
}
//...
}

OriginalL'auteur sebaferreras

8

Il est recommandé que vous utilisez this.app.getActiveNavs() Ionique dans les 3+ comme getActiveNav() sera supprimée dans la prochaine version majeure, de sorte que votre fonction peut être écrite comme suit:
```
showLoginModal() {
let loginPage = Modal.create(AuthPage);
this.getActiveNavs().slice(-1)[0].present(loginPage);
}
```
À pousser sur la valeur liquidative de la pile, vous pouvez simplement importer la page (dire YourPage) puis:
```
this.getActiveNavs()[0].push(YourPage);
```
Ancien comportement, pour Ionique 2, obsolète Ionique 3:

Vous pouvez utiliser this.getActiveNav() Ionique dans les 2 (Ionique et 3), de sorte que votre fonction peut être écrite comme suit:
```
showLoginModal() {
let loginPage = Modal.create(AuthPage);
this.getActiveNav().present(loginPage);
}
```
Avec ces deux méthodes, vous n'avez pas besoin de tout import ou private variable pour que cela fonctionne. Si vous êtes dans un Component, tout simplement se référer à votre 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);
}
}
```
Alors que ce bout de code peut être la solution, y compris une explication aide vraiment à améliorer la qualité de votre post. Rappelez-vous que vous répondez à la question pour les lecteurs dans l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre code suggestion.
Merci @Adam, j'ai double post sur deux questions, alors vous avez raison, pas vraiment utile ici! Je suis en train de monter en ce moment.

OriginalL'auteur Yvan
2

Ok, j'ai juste utilisé la valeur liquidative au lieu de NavigationController et maintenant ça fonctionne.

OriginalL'auteur Fargho

J'ai manipulé avec:

import { App, NavController } from 'ionic-angular';
constructor(protected app: App) {
... }
get navCtrl(): NavController {
return this.app.getRootNav();
}

Répondre prises à partir d'ici: github questions

OriginalL'auteur V. Aliosha

1

Vous avez nommé votre nav incorrecte;
```
this.nav.setRoot(page.component);
```
Devrait être
```
this.navCtrl.setRoot(page.component);
```
Et vérifiez si votre importer correctement
```
import { NavController} from 'ionic-angular';
```
Ce n'est pas une erreur! NavController sont correctement importées. Le problème est qu'il ne peut pas être injecté ici. Il a fait une référence à nav par écrit @ViewChild(Nav) nav: Nav;. Nav s'étend NavController de sorte qu'il peut être utilisé à la place.

OriginalL'auteur LeRoy
0

Une des causes de cette erreur lorsque vous essayez d'injecter NavController dans un fournisseur de classe.

Comme ceci:
```
@Injectable()
export class MyProviderService {
constructor(private nav: NavController){
}
}
```
J'ai juste eu cette erreur...

Après la suppression de cette injection (et refactoring du code), il a bien fonctionné.

OriginalL'auteur Ricardo Silva

Vous devez vous connecter pour publier un commentaire.