尝试将数据从子组件传递到父组件时出现错误“NavController 没有提供程序”

Question

我正在尝试使用 EventEmitter 和输出将数据从我的 home.ts 文件发送到 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 文件中，使它在您的应用程序中拥有与您的导航控制器相同的实例。

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        ...
    ],
    imports: [ 
        ...
    ],
    exports: [
    ],
    providers: [ 
    ...
        NavController
    ]
})

但是，由于您使用的是 ionic，我会在以下 url 上查看相关主题。

Ionic 2 - Runtime Error No provider for NavController