將數據從服務傳遞到組件

Question

在有人將此標記為重復之前以下是我嘗試過但失敗的鏈接

Angular 2 - 將數據從服務傳遞到組件

如何在Angular2中訂閱服務上的事件？

場景我想將數據從我的ng2服務發送到組件，並且使用ng2 HTTP從API加載數據

下面是虛擬代碼

為MyService

@Output() event_callback: EventEmitter<any> = new EventEmitter();

getUserDetails(id)
{
    var user_data;
    this.loadRemoteUrl('getUserdata?user_id=' + id).subscribe(
        data => { user_data = data},
        err => console.error(err),
        () => {
            console.log('Inside My Service');
            this.user_data = user_data;
            this.event_callback.emit(this.user_data);
        }
    );
}

為MyComponent

constructor(private http:Http, private myService: MyService) 
{
    var userDetails;
    myService.event_callback.subscribe(
        data => this.callbackFunction()
    );
}

callbackFunction()
{
    console.log("Inside MyComponent")
}

控制台日志

Inside My Service

HTTP請求正確地返回數據我嘗試在發出之前進行轉儲並且它工作但問題是我無法訪問我的組件中的數據，我嘗試傳遞數據，現在我只是一些記錄消息來識別流但仍然無法看到從我的組件文件中記錄消息。

我錯過了什么？

Answer 1

在你的情況下，而不是@Output我建議使用可觀察的主題。

在您的服務中，以下內容：

@Output() event_callback: EventEmitter<any> = new EventEmitter();

創建新的可觀察源和流（記住從“rxjs / Subject”導入主題）：

private eventCallback = new Subject<string>(); // Source
eventCallback$ = this.eventCallback.asObservable(); // Stream

Insted：

this.event_callback.emit(this.user_data);

發送消息：

this.eventCallback.next(this.user_data);

然后，在您的組件中：

myService.eventCallback$.subscribe(data => {
    this.callbackFunction();
});

請參閱： Plunker上的工作示例

閱讀有關此解決方案的更多信息： Angular.io - 通過服務進行通信