Как объединить наблюдаемый параметр запроса и наблюдаемую форму с помощью Angular и RXJS

У меня есть список сообщений с разбиением на страницы, на который я подписываюсь на параметр запроса ?page=, чтобы отозвать API службы.

ngOnInit(): void {

    this.route.queryParams.subscribe(params => {

        const page = params['page'];

        // on query parameter change, call the API service here


    });
}

Теперь у меня есть новое требование, согласно которому пользователь также может фильтровать список, выбирая раскрывающийся список «Категория» с помощью Reactive Form.

Используя Reactive Form, я могу подписаться на наблюдателя, используя этот код здесь

onChanges(): void {
  this.myForm.get('category').valueChanges.subscribe(val => {
    // on form value change, call the API service here
  });
}

Мой вопрос в том, как я могу упростить это, используя Angular и RXJS?

Метод в приведенном выше примере не совсем СУХОЙ, потому что вызывает один и тот же API, только с другим параметром запроса.

Спасибо.


angular rxjs5 rxjs-pipeable-operators
person cyberfly    schedule 04.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать оператор combineLatest:

ngOnInit(): void {
  combineLatest(
    this.route.queryParams, 
    this.myForm.get('category').valueChanges
  ).subscribe(([{ page }, category]) => {
     // on any change call the API service here
  });
}

Примечание: не забудьте отписаться в хуке onDestroy или использовать оператор takeUntil

person Poul Kruijt    schedule 04.10.2018
comment
Спасибо, ваш ответ указал мне правильное направление понимания RXJS. - person cyberfly; 05.10.2018