如何订阅其输入依赖于其他可观察数据的可观察对象

Question

在我的 Angular 应用程序中，我有一个组件，其数据取决于路由参数。 当页面第一次打开时数据被正确加载。当我切换到不同的页面但停留在同一个组件上（因此只有一个路由参数发生变化）时，不会加载新数据。

路由参数已更新，并且通过异步管道订阅的所有数据都已正确加载。然而，有一条数据需要额外处理。这个 observable 正在组件中被订阅。这是没有再次加载数据的那个。

在下面的代码中，内置的 paramMap 可观察订阅持续跟踪路由参数的更改并运行回调。第二个可观察的没有。我想这是因为第二个 observable 已完成，实际上被一个从未订阅过的新 observable 替换（在第一个回调中）。

如何最好地处理这个问题，同时从第二个 observable 中获取数据？

似乎使它起作用的唯一事情是将第二个订阅移动到第一个的回调。但这对我来说看起来不是很干净的代码，而且我不确定如果由于某种原因 observable 在被新代码替换时没有完成会发生什么。

ngOnInit(): void {
  this.route.parent.paramMap.subscribe((paramMap: ParamMap) => {
    this.id = paramMap.get('id');
    this.observable= this.service.getSomething(this.id);
  }
  this.observable.subscribe(
    // callback that handles the processing of the data
  )
}

Answer 1

您可以在这里使用switchMap 运算符形式的 RxJS，例如：

ngOnInit(): void {
    this.route.parent.paramMap.pipe(switchMap((paramMap: ParamMap) => {
      this.id = paramMap.get('id');
      return this.service.getSomething(this.id);
    })).subscribe(
        // callback that handles the processing of the data
      );
}

Answer 2

我可以想象你想做下面的事情（rxjs v6）：

  ngOnInit(): void {
    this.route.parent.paramMap.pipe(
      map(paramMap: ParamMap) => this.id = paramMap.get('id'),
      mergeMap(id => this.service.getSomething(this.id))
    )
      .subscribe(
        // callback that handles the processing of the data
      )
  }

所以每当参数发生变化时，整个管道都会被触发并调用服务。

Answer 3

使用运算符：

ngOnInit() {
  this.observable = this.route.parent.paramMap.pipe(
    map(paramMap => paramMap.get('id')),
    switchMap(id => this.service.getSomething(id))
  );
}

switchMap 将取消挂起的请求。

如果您想让它们保持活跃，请使用mergeMap。