이온 2 : 예외 : NavController 제공 업체 없음

Question

이온 2/각도 2 앱에 문제가 있습니다.

"auth"부분이 구현 된 app.ts가 있습니다.

코드는 다음과 같습니다

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

네 nav의 이름을 잘못 지정했습니다. 당신이 제대로

import { NavController} from 'ionic-angular'; 

Answer 2

을 가져 오는 경우

this.nav.setRoot(page.component); 

당신은 그래서 당신이 그에서 제거해야합니다 귀하의 루트 구성 요소에 NavController를 주입 할 수

this.navCtrl.setRoot(page.component); 

그리고 한 번 확인이어야한다 코드의 일부. 자세한 내용은 here입니다.

#myNav) (같은, 당신이 이미 ion-nav에 참조 변수를 확인하십시오 :.

<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를 삽입 할 수 없으므로 삽입 할 수 없습니다.이온 NAV에 기준 변수를 추가함으로써, 사용자가 탐색 컨트롤러 인 탐색 컴포넌트의 인스턴스를 얻을 @ViewChild 사용할 수

Answer 6

그것은 만약 this.app.getActiveNavs()를 사용 권장 (이것은 NavController 확장) getActiveNav()가 다음 주요 릴리스에서 제거되므로, 함수는 다음과 같이 기록 될 수있는 이온 3+에서 다음 탐색 스택에 밀어

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

, 당신은 단지 페이지를 가져올 수 있습니다 (YourPage를 말) 다음 :

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

이전 동작, 이온 3에서 사용되지 않는 이온 2를 위해 :

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