Question

我尝试使用EventEmitter和Output将数据从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

错误指出你应该在某个地方的providers部分提供NavController。此部分可以在您的应用程序的几个模块中，但一般是app.module.ts文件。

在那里你有一个提供者部分，你可以在其中为Angular依赖注入机制提供适当的服务或提供者。

所以我的第一个想法就是在app.module.ts文件的providers部分添加navController。这可确保Angular可以解析对NavController的依赖性。将它放在app.module.ts文件中会使你的应用程序中的navcontroller具有相同的实例。

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

但是，由于您使用的是离子，我会在以下网址上查看相关主题。

Ionic 2 - Runtime Error No provider for NavController

得到错误＆＃34;没有NavController的提供者＆＃34;尝试将数据从子组件传递到父组件时

1 个答案: