将数据从服务传递到组件
Passing Data from Service to Component
在有人将此标记为重复之前以下是我尝试但失败的链接
场景
我想将数据从我的 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 请求正在正确返回数据,我在发出之前尝试转储并且它有效但问题是我无法访问我的组件中的数据,我尝试传递数据,现在我只是一些日志消息来识别流但是仍然无法从我的组件文件中看到日志消息。
我错过了什么?
在你的情况下,我建议使用可观察的主题而不是@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();
});
阅读有关此解决方案的更多信息:
Angular.io - Communicate via a service
在有人将此标记为重复之前以下是我尝试但失败的链接
场景 我想将数据从我的 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 请求正在正确返回数据,我在发出之前尝试转储并且它有效但问题是我无法访问我的组件中的数据,我尝试传递数据,现在我只是一些日志消息来识别流但是仍然无法从我的组件文件中看到日志消息。
我错过了什么?
在你的情况下,我建议使用可观察的主题而不是@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();
});
阅读有关此解决方案的更多信息: Angular.io - Communicate via a service