将数据从服务传递到组件

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/主题"导入主题）：

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

请参阅：Plunker上的工作示例

阅读有关此解决方案的更多信息：Angular.io-通过服务沟通