angular - 将数据从服务传递到组件

Question

在有人将其标记为重复之前下面是我尝试过但失败的链接

Angular 2 - passing data from service to component

How to subscribe to an event on a service in Angular2?

场景 我想将数据从我的 ng2 服务发送到组件，并且正在使用 ng2 HTTP 从 API 加载数据

下面是伪代码

我的服务

@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);
        }
    );
}

我的组件

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

代表:

this.event_callback.emit(this.user_data);

通过以下方式发送消息:

this.eventCallback.next(this.user_data);

然后，在您的组件中:

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

参见:working example on Plunker

阅读有关此解决方案的更多信息: Angular.io - Communicate via a service