子コンポーネントから親コンポーネントにデータを渡そうとしたときに「NavControllerのプロバイダがありません」というエラーが表示される

Question

home.tsファイルからeventEmitterおよびOutputを使用してapp.component.tsファイルにデータを送信しようとしています。しかし、私はapp.htmlのホームページコンポーネントを参照するたびに、これは一見ランダムなエラーが出ます。 home.tsのコンストラクタからNavControllerを削除すると、エラーはなくなります。

home.ts：

 import { Component, EventEmitter, Output } from '@angular/core'; 
    import { NavController } from 'ionic-angular'; 

    @Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    }) 

    export class HomePage { 
    message : any; 
    @Output() notify : EventEmitter<Object> = new EventEmitter<Object>(); 

    constructor(public navCtrl: NavController) { 

    } 
    ionViewDidLoad(){ 
    this.message = {"Name":"Sid", "Age":17}; 
    this.notify.emit(this.message); 
    } 
} 

app.html：

<ion-nav [root]="rootPage"></ion-nav> 
    <page-home (notify)="getChildData($event)"></page-home> 

app.component.ts：

import { Component, ViewChild, ViewChildren } from '@angular/core'; 
    import { Platform } from 'ionic-angular'; 
    import { StatusBar } from '@ionic-native/status-bar'; 
    import { SplashScreen } from '@ionic-native/splash-screen'; 

import { HomePage } from '../pages/home/home'; 
@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
rootPage:any = HomePage; 

constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
SplashScreen) { 
    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(); 
    splashScreen.hide(); 

    }); 

} 
getChildData(message){ 
    console.log(message["Name"]); 
    console.log(message["Age"]); 

} 
} 

がどのように私はこのエラーを修正しますか？ NavControllerを使用する必要があるため、削除できません。子コンポーネントから親コンポーネントにデータを送信できるようにしたい

Answer 1

エラーは、NavControllerをどこかのプロバイダセクションに提供する必要があることを指摘しています。このセクションはアプリケーションのいくつかのモジュールに含まれていますが、一般的なものはapp.module.tsファイルです。

ここには、Angular依存性注入メカニズムが適切に機能するためのサービスまたはプロバイダを提供できるプロバイダセクションがあります。

私は最初に、app.module.tsファイルのprovidersセクションにnavControllerを追加することになりました。これにより、AngularがNavControllerの依存関係を解決できるようになります。 app.module.tsファイルに置くことで、あなたのアプリケーション全体にnavcontrollerと同じインスタンスが作成されます。

しかし、イオンを使用しているため、次のURLで関連するトピックをチェックします。

Ionic 2 - Runtime Error No provider for NavController