在 Angular 2 中处理嵌套订阅的正确方法

Question

我正在尝试为 angular 2 具有查询参数和可观察值的网络应用程序创建分页。我已经找到了可以使用下面的代码的东西，但我觉得嵌套订阅不是一个好主意。有一个更好的方法吗？

  blogs:any;
  page = 0;
  sub;

  ngOnInit() {
    this.sub = this.route.queryParams
      .subscribe(params => {
           this.page = +params['page'] || 0;
           this.requestService.getData('posts', '..query string...')
       .subscribe(data => this.blogs = data.data);
     });
  }
  nextPage() {
      this.router.navigate(['./'], { queryParams: { page: this.page + 1 }, relativeTo: this.route }   );
   }

Answer 1

您可以使用 .switchMap 链接 observable。

ngOnInit() {
  this.sub = this.route.queryParams
  .switchMap(params => {
       this.page = +params['page'] || 0;
       return this.requestService.getData('posts', '..query string...')
  })
  .subscribe(data => this.blogs = data.data);
}

在 Angular 2 中处理嵌套订阅的正确方法

Proper way to handle nested subscriptions in Angular 2

angular2-routing

angular2-observables

angular