如何将来自 HttpClient 和 paramMap 的 Observables 一起用于动态加载组件？

Question

我有一个 HTTPClient 'get' 方法，它 returns 一个 JSON 对象数组。此外，我目前正在使用路由参数中的键从该数组中提取一个对象。

组件是动态的，这意味着当路由参数改变时，组件不会被销毁。

问题

切换新的路由参数时，组件不会更改 selectedUser 对象。

为什么？

因为 httpClient 在发出一个项目后完成可观察流，因此 paramMap 可观察对象也关闭，因此当路由参数的不同值发生变化时它不会发出。

例如：'/user/:name'

'/user/bob' ---> 组件找到选定的用户
从组件中输入了一个新用户“/user/john”
'/user/john' ----> 组件未检测到新参数

下面是代码片段（users$ 是 http.get() 可观察对象）。

  ngOnInit() {
    this.users$.pipe(
      withLatestFrom(this.params$),
      map( ([users, params]) => {
        return users.find((user) => user.slug === params.landmark);
      })
    ).subscribe(user => this.selecteduser = user);
  }
}

编辑：切换到 combineLatest 确实有效，但我不得不这样重新排列可观察对象：

  ngOnInit() {
    this.params$.pipe(
      combineLatest(this.users$, this.params$),
      map( ([params, users]) => {
        this.users = users;
        return users.find((user) => user.slug === params.landmark);
      })
    ).subscribe(user => this.selecteduser = user);
  }

Answer 1

使用 combineLatest 而不是 withLatestFrom。即使在一个流完成后，这也会使结果流处于活动状态。

ngOnInit() {
     combineLatest(this.users$, this.params$).pipe(
      map( ([users, params]) => {
        return users.find((user) => user.slug === params.landmark);
      })
    ).subscribe(user => this.selecteduser = user);
  }

如何将来自 HttpClient 和 paramMap 的 Observables 一起用于动态加载组件？

How to use the Observables from HttpClient and paramMap together for a dynamically loading component?

httpclient

observable

rxjs

rxjs5

angular