Ionischen 2: AUSNAHME: Kein Anbieter für NavController

ich habe ein problem mit meinem ionic 2/Winkel 2 app.

Hab ich eine app.ts, wo das Loch "auth" - Teil ist vorgegeben.

Der code sieht so 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 starte, bekomme ich diese Meldung:

ORIGINAL EXCEPTION: No provider for NavController

Haben Sie eine Idee, wie dieses problem zu lösen? Danke!

InformationsquelleAutor Fargho | 2016-06-30

19

Sie kann nicht Spritzen, ein NavController in einer Root-Komponente, die über einen Konstruktor.

Also, im Grunde können Sie not etwas tun, wie unten:-
```
constructor(private nav: NavController){
}
```
Dies ist, wie Sie gelingen kann, eine NavController
```
@Controller({
  ....
})
class MyApp{
  @ViewChild('nav') nav: NavController;
  ....
  ....
  constructor(...){ //See, no NavController here
  }
  ....
}
```
Und das ist, was Ionischen docs zu sagen hat.

Was ist, wenn Sie wollen, um die navigation zu Steuern von Ihrem root-app-Komponente? Sie können nicht injizieren NavController, weil alle Komponenten, Navigations-Controller sind Kinder des root-Komponente, so dass Sie nicht gespritzt werden.

Durch das hinzufügen einer Referenz-variable auf der ion-nav, können Sie mit @ViewChild um eine Instanz der Nav-Komponente, die eine Navigations-controller (es reicht NavController)

InformationsquelleAutor Mav55

Kann man nicht injizieren die NavController in Ihrem Root-Komponente so, Sie sollten entfernen es aus, dass ein Teil des Codes. Weitere Informationen finden Sie hier.

Bitte stellen Sie sicher, dass Sie bereits eine Referenz-variable in Ihrer ion-nav wie diese (die #myNav):

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

Und dann können Sie den Verweis, indem Sie mit ViewChild. Sie können dann navigieren Sie einfach zu einer anderen Seite, durch die 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
  }

  //...
}

InformationsquelleAutor sebaferreras

8

Es wird empfohlen, Verwendung this.app.getActiveNavs() im Ionischen 3+ als getActiveNav() entfernt werden, in der nächsten major release, so kann eine Funktion geschrieben werden als:
```
showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.getActiveNavs().slice(-1)[0].present(loginPage);
}
```
Druck auf die nav-stack, können Sie einfach importieren die Seite (sagen YourPage) dann:
```
this.getActiveNavs()[0].push(YourPage);
```
Alte Verhalten, für Ionic-2, veraltet in Ionic 3:

Können Sie this.getActiveNav() im Ionischen 2 (und Ionic-3), so kann eine Funktion geschrieben werden als:
```
showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.getActiveNav().present(loginPage);
}
```
Entweder Methode, die Sie brauchen keine import oder private variable für diese zu arbeiten. Wenn Sie in einer Component einfach finden Sie Ihr 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);
    }
}
```
- Während dieses code-snippet, das die Lösung sein kann, einschließlich einer Erklärung die wirklich hilft, zu verbessern, die Qualität Ihrer post. Denken Sie daran, dass Sie die Beantwortung der Frage für den Leser in der Zukunft, und die Menschen vielleicht nicht wissen, die Gründe für deinen code-Vorschlag.
- Danke @Adam, ich habe Doppel-post, auf zwei Fragen, also du hast Recht, nicht wirklich hilfreich hier! Ich Editier es jetzt.
InformationsquelleAutor Yvan
2

Ok, ich habe gerade verwendet die nav anstelle der NavigationController und jetzt funktioniert es.

InformationsquelleAutor Fargho

Behandelte ich es mit:

import { App, NavController } from 'ionic-angular';

constructor(protected app: App) {
... }

get navCtrl(): NavController {
    return this.app.getRootNav();
}

Antwort hier: github issues

InformationsquelleAutor V. Aliosha

1

Sie Ihren Namen nav falsch;
```
this.nav.setRoot(page.component);
```
Sollte
```
this.navCtrl.setRoot(page.component);
```
Und überprüfen Sie, wenn Ihre Import-richtig
```
import { NavController} from 'ionic-angular';
```
- Dies ist kein Fehler! NavController korrekt importiert. Das problem ist, dass es nicht injiziert werden hier. Er machte einen Verweis auf nav schreiben @ViewChild(Nav) nav: Nav;. Nav erstreckt NavController so kann es stattdessen verwendet werden.
InformationsquelleAutor LeRoy
0

Eine Ursache für diesen Fehler, wenn Sie versuchen, zu injizieren NavController in eine provider-Klasse.

Wie diese:
```
@Injectable()
export class MyProviderService {

  constructor(private nav: NavController){
  }
}
```
Hatte ich nur diesen Fehler...

Nach dem entfernen der Injektion (und refactoring der code), es funktionierte.

InformationsquelleAutor Ricardo Silva

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.