web-dev-qa-db-ja.com

Ionic 2：例外：NavControllerのプロバイダーなし

私のionic 2/angular 2アプリに問題があります。

ホールの「auth」部分が実装されているapp.tsを取得しました。

コードは次のようになります。

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

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

ORIGINAL EXCEPTION: No provider for NavController

この問題を解決する方法はありますか？ありがとう！

angulartypescriptionic-frameworkionic2ionic3
15
Fargho

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

だから、基本的にあなたはnot以下のようなことをすることができます：-

constructor(private nav: NavController){
}

これは、NavControllerを注入する方法です。

@Controller({
  ....
})
class MyApp{
  @ViewChild('nav') nav: NavController;
  ....
  ....
  constructor(...){ // See, no NavController here
  }
  ....
}

そして、これがIonic docsが言わなければならないことです。

ルートアプリコンポーネントからナビゲーションを制御する場合はどうなりますか？ Navigation Controllerであるコンポーネントはルートコンポーネントの子であるため、NavControllerをインジェクトでき​​ません。インジェクトすることはできません。

Ion-navに参照変数を追加することにより、@ ViewChildを使用して、Naviコンポーネントのインスタンスを取得できます。これは、Navigation Controllerです（NavControllerを拡張します）

19
Mav55

Root ComponentにNavControllerを挿入することはできないため、コードのその部分から削除する必要があります。詳細については、ここを参照してください。

次のように、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
  }

  // ...
}
15
sebaferreras

Ionic 3+ではgetActiveNav（）が次のメジャーリリースで削除されるため、関数は次のように記述できるため、this.app.getActiveNavs()を使用することをお勧めします。

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

Navスタックをプッシュするには、ページ（たとえばYourPage）をインポートするだけで済みます。

_this.getActiveNavs()[0].Push(YourPage);
_

古い動作、Ionic 2、非推奨Ionic 3：

this.getActiveNav()をIonic 2（およびIonic 3）で使用できるため、関数は次のように記述できます。

_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);
    }
}
_
8
Yvan

私はそれを扱いました：

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

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

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

ここからの回答： github issues

2
V. Aliosha

わかりました、NavigationControllerの代わりにnavを使用しましたが、今では動作します。

2
Fargho

誤ってnavという名前を付けました。

this.nav.setRoot(page.component);

あるべき

this.navCtrl.setRoot(page.component);

そして、インポートが正しく行われているかどうかを再確認します

import { NavController} from 'ionic-angular';
1
LeRoy

このエラーの原因の1つは、NavControllerをプロバイダークラスに挿入しようとしたときです。
このような：

@Injectable()
export class MyProviderService {

  constructor(private nav: NavController){
  }
}

私はちょうどそのエラーがありました...
このインジェクションを削除（およびコードのリファクタリング）した後、正常に機能しました。

0
Ricardo Silva