Question

我有一个服务，通过http get请求和后续的map操作为我提供了一个observable。在我的组件中，我订阅了ngOnInit方法中的observable。由于我有分页功能，我想在用户点击分页符的另一页时向该服务发出另一个请求。我怎样才能做到这一点？我是否必须再次使用新方法订阅服务，或者是否可以初始化组件中的observable以便在任何方法中使用它？

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

}

Answer 1

您的服务可以使用私有行为主题公开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 $事件。

Answer 2

如果您想避免代码重复，可以执行以下操作：

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

如果您的observable始终使用相同的数据，并且您不想在每次订阅时发送请求，则需要向您的observable添加缓存。例如：

this.yourObservable
       .first()
       .publishReplay(1)
       .refCount();

有关此处缓存的更多信息：What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

Angular 2秒对Observable的请求

2 个答案: