角度4発光および共有サービス

Question

私は私のメインコンポーネントにイベントを放出していますでのイベントにサブスクライブ：

main.component.ts

ここ

this.sharedService.cartData.emit(this.data); 

である私のsharedService.ts

私の他の（サブ）コンポーネントで

import { Component, Injectable, EventEmitter } from '@angular/core'; 
export class SharedService { 
    cartData = new EventEmitter<any>(); 
} 

は、私は、この値にアクセスしたいのですが、どういうわけか、サブスクリプションが動作しません：

ダッシュボード.ts

private myData: any; 

constructor(private sharedService: SharedService) { 
    this.sharedService.cartData.subscribe(
     (data: any) => myData = data, 
     error => this.errorGettingData = <any>error, 
     () => this.aggregateData(this.myData)); 
} 

私に何か不足していますか？データを注入可能なものとして渡すとうまく動作します。 イベントを（主要コンポーネント内で）放出することは、いくつかのREST呼び出しの後に起こります。

*************アップデート*************** 問題は、サブコンポーネントが最初の放出後に作成されることですイベントの私はこの場合、データを直接サブコンプリートに注入するほうがよいと思います。

Answer 1

私は上で提供したコードを使用して作業中のサンプルを作成しました。 https://plnkr.co/edit/LS1uqB?p=preview

import { Component, NgModule, Injectable, EventEmitter, AfterViewInit } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 


@Injectable() 
export class SharedService { 
    cartData = new EventEmitter<any>(); 
} 

@Component({ 
    selector: 'app-app', 
    template: ` 
    <h1> 
     Main Component <button (click)="onEvent()">onEvent</button> 
    </h1> 
    <p> 
     <app-dashboard></app-dashboard> 
    </p> 
    `, 
}) 
export class App implements AfterViewInit { 
    data: any = "Shared Data"; 

    constructor(private sharedService: SharedService) { 
    } 

    ngAfterViewInit() { 
    this.sharedService.cartData.emit("ngAfterViewInit: " + this.data); 
    } 

    onEvent() { 
    this.sharedService.cartData.emit("onEvent: " + this.data); 
    } 
} 

@Component({ 
    selector: 'app-dashboard', 
    template: ` 
    <h2> 
     Dashboard component 
    </h2> 
    <p> 
     {{myData}} 
    </p> 
    `, 
}) 
export class AppDashboard implements AfterViewInit { 
    myData: any; 

    constructor(private sharedService: SharedService) { 
      this.sharedService.cartData.subscribe(
      (data: any) => { 
      console.log(data); 
      this.myData = data; 
      }); 
    } 

} 


@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, AppDashboard ], 
    providers: [ SharedService ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

ビューのライフサイクルフックここhttps://angular.io/guide/lifecycle-hooks