Как использовать Observables из HttpClient и paramMap вместе для динамически загружаемого компонента? - PullRequest
Новая
       26

Как использовать Observables из HttpClient и paramMap вместе для динамически загружаемого компонента?

0 голосов
/ 10 июня 2018

У меня есть HTTPClient метод get, который возвращает массив объектов JSON.Кроме того, в настоящее время я использую ключ из параметров маршрута для извлечения одного объекта из этого массива.

Компонент является динамическим, то есть при изменении параметра маршрута компонент не будет уничтожен.

Проблема

При переключении нового параметра маршрута компонент не изменяет объект selectedUser.

Почему?

Поскольку httpClient завершает наблюдаемый поток после одного испускаемого элемента, поэтому наблюдаемая paramMap также закрывается, поэтому она не будет излучать, когда другое значение дляизменения параметров маршрута.

ex: '/ user /: name'

  1. '/ user / bob' ---> компонент находит выбранного пользователя
  2. изкомпонент вводится новым пользователем '/ user / john'
  3. '/ 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);
  }
}

EDIT: переключение на сочетанииПоследний работает, но мне пришлось переставить наблюдаемое как таковое: 

  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);
  }

1 Ответ

0 голосов
/ 10 июня 2018

Используйте 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);
  }
...