आयनिक 2: एक्सेप्शन: NavController

Question

के लिए कोई प्रदाता नहीं है मुझे अपने आयनिक 2/कोणीय 2 ऐप में कोई समस्या है।

मुझे एक ऐप.ट्स मिला जहां छेद "auth" भाग कार्यान्वित है।

कोड इस तरह दिखता है:

ORIGINAL EXCEPTION: No provider for NavController 

आप कैसे इस समस्या को हल करने के लिए कोई विचार है:

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

लेकिन अब, जब मैं अनुप्रयोग चलाने के लिए कोशिश मैं यह संदेश प्राप्त? धन्यवाद!

Answer 1

आपने अपना नौसेना गलत तरीके से नामित किया है;

this.nav.setRoot(page.component); 

यदि आपका सही ढंग से आयात करने

import { NavController} from 'ionic-angular'; 

Answer 2

this.navCtrl.setRoot(page.component); 

और दोहरी जांच होना चाहिए आप अपने रूट घटक में NavController इंजेक्षन नहीं कर सकते हैं ताकि आप उस से इसे निकाल देना चाहिए कोड का हिस्सा अधिक जानकारी here मिल सकती है।

कृपया सुनिश्चित करें कि आप पहले से ही अपने ion-nav में एक संदर्भ चर राशि बनाने के लिए, इस तरह (#myNav):।

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

और फिर आप ViewChild का उपयोग करके कि संदर्भ प्राप्त कर सकते हैं इसके बाद आप सिर्फ एक पृष्ठ पर नेविगेट कर सकते हैं, कि संपत्ति का उपयोग करके:

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

ठीक है, मैं सिर्फ navigationController के बजाय एनएवी इस्तेमाल किया और अब यह काम करता है

Answer 4

।

इस त्रुटि का एक कारण यह है कि जब आप प्रदाता कक्षा में NavController इंजेक्ट करने का प्रयास करते हैं।
इस तरह:

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

मैं सिर्फ इतना है कि त्रुटि ...
इस इंजेक्शन को दूर करने के लिए (और कोड पुनर्रचना) के बाद किया था, यह ठीक काम किया।

Answer 5

आप एक निर्माता घटक के माध्यम से रूट घटक में NavController इंजेक्ट नहीं कर सकते हैं।

तो, मूल रूप से आप not कुछ नीचे की तरह कर सकते हैं: -

constructor(private nav: NavController){ 
} 

और यह आयोनिक डॉक्स क्या कहना है।

क्या होगा यदि आप अपने रूट ऐप घटक से नेविगेशन को नियंत्रित करना चाहते हैं? आप NavController इंजेक्ट नहीं कर सकते हैं क्योंकि नेविगेशन नियंत्रक वाले किसी भी घटक रूट घटक के बच्चे हैं, इसलिए वे इंजेक्शन के लिए उपलब्ध नहीं हैं।

आयन एनएवी के लिए एक संदर्भ चर जोड़कर, आप @ViewChild उपयोग कर सकते हैं नव घटक है, जो एक नेविगेशन नियंत्रक है का एक उदाहरण प्राप्त करने के लिए (यह NavController फैली)

Answer 6

यह आप this.app.getActiveNavs() का उपयोग अनुशंसा की जाती है आयोनिक 3+ के रूप में getActiveNav() अगले प्रमुख रिलीज में हटा दिया जाएगा, तो अपने समारोह के रूप में लिखा जा सकता है में:

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

एनएवी ढेर पर पुश करने के लिए, आप केवल पृष्ठ आयात कर सकते हैं (जैसे कि YourPage) तो :

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

पुराने व्यवहार आयोनिक 2 आयोनिक 3 में पदावनत के लिए:

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

:

आप आयोनिक 2 (और आयोनिक 3) में this.getActiveNav() उपयोग कर सकते हैं, तो आपके समारोह के रूप में लिखा जा सकता है

किसी भी विधि के साथ आपको काम करने के लिए import या private चर की आवश्यकता नहीं है। यदि आप एक Component में हैं, तो बस अपने 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); 
    } 
}