我编写了一个对后端执行http查询的服务:
getPlacesForUser(){
this.http.get("http://localhost:8080/processPlaces")
.map(res => res.text())
.subscribe(
data => this.result = data,
err => this.logError(err),
() => console.log('Places Request completed')
)
}
现在我想更新组件端,如果请求已完成:
processPlaces(){
this._backendService.getPlacesForUser();
}
如何在组件和服务之间进行通信?
此外,我寻找最佳实践。
答案 0 :(得分:4)
实际上,您可以直接从getPlacesForUser
方法返回observble并在其上附加订阅方法。
<强>服务强>
getPlacesForUser(){
return this.http.get("http://localhost:8080/processPlaces")
.map(res => res.text());
}
<强>组件强>
processPlaces(){
this._backendService.getPlacesForUser()
.subscribe(
data => this.result = data,
err => this.logError(err),
() => console.log('Places Request completed')
);
}
result
属性对应于您可以在组件中使用的组件的属性。
您可以注意到async
管道可用于直接利用表达式中的observable(例如在ngFor
内)。
我认为这个答案可以帮助你:How to Consume Http Component efficiently in a service in angular 2 beta?。
希望它可以帮到你, 亨利
答案 1 :(得分:0)
还有另一种方法可以使用Rxjs框架调用每个组件的数据,确保服务应该可以重用于所有组件,因此,您可以在服务中执行代码并仅在组件中进行订阅:
<强>服务强>
import { Injectable } from 'angular2/core';
import { Http } from 'angular2/http';
import { Result} from './models/result'; // model imported
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class Service {
private _result: Result[];
constructor(private http: Http) {
this.result$ = new BehaviorSubject<Result[]>(this._result)
}
result$: BehaviorSubject<Result[]>;
private _urlGet = '/api';
getPlacesForUser(): void{
this.http.get(this._urlGet)
.map(res => JSON.parse(res.text()))
.catch(error => console.log(error))
.subscribe(result => {
this.result = result;
})
}
}
<强>组件强>
constructor(private _service: Service)
ngOnInit(): any {
this._service.result$.map(result => result.filter(res =>
res.id)).subscribe(
result => this.result = result); // map is optional to filter json
}