2016-06-30 7 views
7

イオン2 /アンゴラ2アプリに問題があります。イオン2:例外:NavControllerのプロバイダがありません

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

しかし、今、私はアプリを実行しようとすると、私はこのメッセージが表示されますか?ありがとう!

答えて

0

ナビゲーションに間違った名前を付けました。あなたはとてもあなたがそれからそれを削除する必要があり、あなたのルートコンポーネントNavControllerを注入することはできませんあなたが正しく

import { NavController} from 'ionic-angular'; 
+0

これはエラーではありません。 'NavController'は正しくインポートされます。問題は、ここに注射できないということです。彼は@ViewChild(Nav)nav:Nav;を書くことによって 'nav'への参照を作った。 'Nav'は' NavController'を拡張して代わりに使用できます。 –

7

をインポートする場合

this.nav.setRoot(page.component); 

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 
    } 

    // ... 
} 
2

[OK]を、私はちょうど代わりにNavigationControllerのナビゲーションを使用し、今では動作します

0

NavControllerをプロバイダークラスに挿入しようとすると、このエラーの原因の1つが発生します。このよう
:この注射を削除(およびコードをリファクタリング)した後、私はちょうどそのエラーが発生しました

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

...
、それがうまく働きました。

10

NavControllerをコンストラクタを介してルートコンポーネントに挿入することはできません。

だから、基本的には not以下のような何かを行うことができます: -

constructor(private nav: NavController){ 
} 

そして、これはイオンドキュメントが言いたいことです。

ルートアプリケーションコンポーネントからのナビゲーションを制御したい場合はどうすればよいですか? NavControllerを挿入することはできません。ナビゲーションコントローラであるコンポーネントはすべてルートコンポーネントの子であるため、注入することはできません。イオンNAVを参照変数を追加すると、ナビゲーションコントローラであるナビゲーションコンポーネントのインスタンスを取得するため@ViewChildを使用することができ

7

それはあなたがthis.app.getActiveNavs()を使用するお勧めします(これは、からNavControllerを拡張します) getActiveNavとしてイオン3+(に)あなたの関数のように書くことができるよう、次のメジャーリリースでは削除されます:NAVスタックにプッシュするに

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

、あなただけのページをインポートすることができます(YourPage言う)その後、 :

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

旧行動、イオン2、イオン3で非推奨:

あなたの関数のように書くことができるようにするには、イオン2(及びイオン3)でthis.getActiveNav()を使用することができます。

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

どちらの方法でも、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); 
    } 
} 
+0

このコードスニペットは解決策であるかもしれませんが、[説明を含む](// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。 – Adam

+0

ありがとう@アアダム、私は2つの質問を二重投稿しました。私は今それを編集しています。 – Yvan

関連する問題