2017-07-27 51 views
1

我試圖使用EventEmitter和Output將數據從我的home.ts文件發送到app.component.ts文件。但每次我在我的app.html中引用主頁組件時,都會看到這個看似隨機的錯誤。當我從home.ts中的構造函數中刪除NavController時,錯誤消失了。嘗試將數據從子組件傳遞到父組件時出現「沒有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,所以我不能刪除它。我想仍然能夠將數據從子組件發送到父組件

+0

參考https://forum.ionicframework.com/t/why-cant-i-import-navcontroller-and-viewcontroller-into-service-or-app/40999/46 – monica

回答

0

錯誤指出您應該在提供程序部分中提供NavController。本節可能在您的應用程序的幾個模塊中,但一般是app.module.ts文件。

在那裏您有一個提供程序部分,您可以在其中爲Angular依賴注入機制提供服務或提供程序以正確工作。

所以我的第一個想法是將navController添加到app.module.ts文件的提供者部分。這可以確保Angular可以將依賴關係解析爲您的NavController。將它放在app.module.ts文件中會使您的navcontroller具有與您的應用程序相同的實例。

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

但是,由於您使用的是離子型,因此我會檢查以下網址上的相關主題。

Ionic 2 - Runtime Error No provider for NavController

+0

我曾嘗試將NavController添加到app.module.ts中的providers數組中,但是這隻會激發更多的錯誤,並且根據我從教程和常規中看到的內容,無論如何您都不應該添加它。問題是我不能在home.ts中使用NavController,而不是app.component.ts。我想知道爲什麼從子組件向父組件發送數據會導致此錯誤。如果我不發送任何數據,則不會發生此錯誤。就像我之前說過的,如果我不在Home.ts構造函數中注入NavController,那麼錯誤也不會發生。 –

相關問題