我有一个服务，它通过超文本传输协议获取请求和以下映射操作为我提供了一个可观察对象。在我的组件中，我订阅了ngOnInit方法中的可观察对象。由于我有分页功能，所以当用户单击分页器的另一页时，我想向服务发出另一个请求。我如何实现这一点？我必须再次在新方法中订阅服务，还是可以在组件中初始化一个可观察对象，以便我可以在任何方法中使用它？
export class ListItemsComponent implements OnInit {
private _listItems = [];
page = 1;
constructor(private _listItemsService:ListItemsServiceService) { }
ngOnInit() {
this._listItemsService.getListItems (this.page)
.subscribe(listItems => this._listItems = listItems);
}
pageChange(page){
this._listItemsService.getListItems (this.page)
.subscribe(listItems => this._listItems = listItems);
}
}
您的服务可以使用私有行为主题将listItems$公开为可观察事件：
@Injectable()
export class ListItemsService{
public listItems$: Observable<[]>
private _listItems: BehaviorSubject<[]>;
private dataStore: {
listItems: []
};
constructor( @Inject(Http) private http: Http) {
this.baseUrl = 'http://localhost/listitemservice/';
this.dataStore = { listItems: [] };
this._listItems = new BehaviorSubject<[]>([]);
this.listItems$ = this._listItems.asObservable();
}
loadAll() {
this.pageChange(1);
}
pageChange(page) {
this.http.get(this.baseUrl + page.id)
.subscribe(items => {
this.dataStore.listItems = items;
this._listItems.next(items);
});
}
然后在您的组件中，订阅listItems$事件。当它触发时，将列表存储在组件类的成员变量中：
export class ListItemsComponent implements OnInit {
private _listItems = [];
constructor(private _listItemsService:ListItemsServiceService) { }
ngOnInit() {
this._listItemService.listItems$.subscribe(t=> {
this._listItems = t;
});
this._listItemsService.loadAll();
}
pageChange(page){
this._listItemsService.pageChange(page);
}
}
在pageChange上，调用ListItemsService的pageChange方法，该方法依次触发listItems$事件。
如果你想避免代码重复，你可以做这样的事情：
export class ListItemsComponent implements OnInit {
private _listItems = [];
page = 1;
constructor(private _listItemsService:ListItemsServiceService) { }
ngOnInit() {
this.pageChange(this.page);
}
subscription;
pageChange(page){
if(this.subscription){
this.subscribtion.unsubscribe();
}
this.subscription = this._listItemsService.getListItems(this.page)
.subscribe(listItems => this._listItems = listItems);
}
}
如果您的可观察对象始终使用相同的数据并且您不想在每个订阅上发送请求，则需要将缓存添加到您的可观察对象。例如：
this.yourObservable
.first()
.publishReplay(1)
.refCount();
更多关于缓存的信息：在RxJs 5中共享Angular 2 Http网络调用结果的正确方法是什么？
