Question

在我的Angular应用中，我有一个组件，其数据取决于路由参数。当页面第一次打开时，数据已正确加载。当我切换到其他页面但停留在同一组件上（因此仅更改一个路由参数）时，不会加载新数据。

更新了routeparameters，并正确加载了使用异步管道订阅的所有数据。但是，其中有一项数据需要额外处理。该可观察对象已在组件中订阅。这是一个没有再次加载数据的数据。

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

如何最好地处理此问题以从第二个可观察的数据中获取数据？

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

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。

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

3 个答案: