Ionic 2: EXCEPTION: NavController

Question

için hiçbir sağlayıcım yok iyonik 2/açısal 2 app ile ilgili bir sorunum var.

"Auth" deliğinin uygulandığı bir app.ts var.

kod şuna benzer:

ORIGINAL EXCEPTION: No provider for NavController 

nasıl bu sorunu çözmek için bir fikrin var mı:

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

Ama şimdi app çalıştırmayı denediğinizde, ben bu mesajı alıyorum? Teşekkürler!

Answer 1

Donanmanızı hatalı olarak adlandırdınız; senin doğru

import { NavController} from 'ionic-angular'; 

Answer 2

ithal eğer

this.nav.setRoot(page.component); 

Öyle bunu çıkarmak gerekir sizin Kök Bileşen yılında NavController enjekte edemez

this.navCtrl.setRoot(page.component); 

Ve çifte kontrol olmalı kodun bir parçası. Daha fazla bilgi here bulunabilir.

#myNav) (böyle, emin zaten senin ion-nav bir referans değişkeni var olun.

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

Ve sonra ViewChild kullanarak bu başvuru alabilirsiniz Daha sonra sadece başka bir sayfasına gidebilirsiniz, o özelliğini kullanarak:

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

Tamam, ben sadece yerine NavigationController nav kullanılan ve şimdi çalışıyor

Answer 4

.

Bu hatanın nedenlerinden biri, bir sağlayıcı sınıfına NavController eklemeyi denediğiniz zamandır. Bunun gibi
: Sadece bu enjeksiyon kaldırarak (ve kod üstlenmeden) sonra o hatayı ...
vardı

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

, iyi çalıştı.

Answer 5

Root bileşeninde bir kurucu aracılığıyla bir NavController enjekte edemezsiniz.

Yani, temelde not aşağıda gibi bir şey yapabilirsiniz: -

constructor(private nav: NavController){ 
} 

Ve bu İon dokümanlar söyleyeceklerini olduğunu.

Gezinmeyi kök uygulama bileşeninizden kontrol etmek isterseniz ne yapmalısınız? NavController'ı kullanamazsınız, çünkü navigasyon denetleyicileri olan herhangi bir bileşen, root bileşeninin çocuklarıdır, böylece enjekte edilmeleri mümkün değildir.iyon gezinme bir referans değişken ekleyerek, bir navigasyon denetleyicisidir Gezinme bileşeninin bir örneği almak için @ViewChild kullanabilir

Answer 6

Bu this.app.getActiveNavs() kullanmak tavsiye edilir (bu NavController uzanır) getActiveNav() sonraki büyük sürümde kaldırılacak, böylece fonksiyon olarak yazılabilir olarak İon 3+ içinde: nav yığını üzerinde itmek için

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

, sadece içe aktarabilirsiniz (YourPage diyelim) daha sonra :

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

Eski davranış, Ionic 3 kullanımdan kaldırılmış İon 2 için:

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

: Sen İon 2 (ve İon 3) içinde this.getActiveNav() kullanabilirsiniz

, böylece fonksiyon olarak yazılabilir

Her iki yöntemde bunun çalışması için herhangi bir import veya private değişkenine ihtiyacınız yoktur. Eğer bir Component iseniz, sadece App bakınız:

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