时间戳

首页 > 解决方案 > 倍增订阅

angular - 倍增订阅

问题描述

在一个组件中，我有两个订阅，一个用于查询参数，一个用于 http GET 请求。在此页面上，用户还可以选择在不同类型的数据之间切换（只能显示一种类型）。当用户点击一个选项时，查询参数更新，订阅更新，所以再次调用http GET请求，数据也更新，如下：

constructor(private service: DataService, private route: ActivatedRoute) {}

ngOnInit() {
        this.route.queryParams.subscribe(params => {
            this.dataType = params["dataType"];
                this.service
                    .getData(this.dataType)
                    .subscribe(data => {
                        this.data=data;
                    })
        })
}

在 html 中：

  [queryParams]="{ dataType: row.dataType}"

问题是，每次用户单击不同类型的数据时，都会从 http GET 请求创建新订阅，因为一切都发生在同一个组件中。因此，当组件创建时：2 个订阅，用户点击新数据类型：新数据加载和 3 个订阅，用户点击不同的数据类型，新数据加载和 4 个订阅等等。正如您可以想象的那样，在点击 4-5 次后，页面就会崩溃。

我一直在尝试为这个问题找到解决方案（特别是根据用户的选择在同一组件中加载数据），但我不知道该怎么做。任何帮助，将不胜感激

标签： angularobservablesubscription

解决方案

一些 RxJS 管道操作符应该可以解决这个问题：

switchMap- 将取消之前的http请求并切换到最新的
使用takeUntil方法来取消订阅
tap副作用（在订阅中不这样做有点难看）

ngOnInit() {
  this.route.queryParams.pipe(
    map(params => params["dataType"]),
    tap(dataType => {
      this.dataType = dataType
    }),
    switchMap(dataType => this.service.getData(this.dataType)),
    takeUntil(this.destroyed$)
  ).subscribe(data => {
    this.data = data;
  })
}

编辑- make takeUntil 最后一个运算符！

推荐阅读