Angular/RxJs 6 - объединение параметров маршрута и параметров запроса больше не работает

Я потратил не менее 2 часов, пытаясь заставить все работать с версией 6, но безрезультатно. Я просто не могу получить параметры маршрута и параметры запроса.

Это самый близкий к старым версиям синтаксис, но он регистрирует только параметры запроса.

Что я хочу сделать, так это обернуть это в службу глобальной маршрутизации, чтобы вызов метода был чистым, и если происходят какие-либо другие обновления, я мог бы изменить их в одном месте.

    import {BehaviorSubject, combineLatest, Observable} from 'rxjs';

constructor(private router: Router, private route: ActivatedRoute)
// body of constructor left out


     // Combine them both into a single observable
    const urlParams: Observable<any> = combineLatest(
        this.route.params,
        this.route.queryParams,
        (params, queryParams) => ({ ...params, ...queryParams})
    );

    urlParams.subscribe(x => console.log(x));

Я также заметил, что по какой-то причине CombineLatest отсутствует в «rxjs/operators». Observable.combineLatest тоже не работает.

Спасибо.


angular rxjs6
person Smith    schedule 10.05.2018    source источник

Ответы (3)


arrow_upward
5
arrow_downward

В rxjs6 больше нет селектора результатов, поэтому вместо этого вам нужно использовать «карту». Документация по миграции руководство по миграции rxjs

import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
import {map} from 'rxjs/operators'

    const urlParams: Observable<any> =  combineLatest(
        this.route.params,
        this.route.queryParams
      ).pipe(
          map(([params, queryParams]) => ({...params, ...queryParams}))
      );

    urlParams.subscribe(x => console.log(x));
person alexKhymenko    schedule 10.05.2018
comment
Я понял, что это работает в моем компоненте ngOnit, но не в моей одноэлементной службе. То есть параметр маршрута отображается только при использовании внутри компонента. Однако служба singleton показывает параметр запроса. Интересно, исправит ли это внедрение сервиса в компонент вместо того, чтобы быть глобальным. - person Smith; 11.05.2018
comment
я бы порекомендовал использовать его в компоненте, потому что при использовании в сервисе может быть много ошибок, потому что иногда он не знает активированный маршрут. - person alexKhymenko; 11.05.2018
comment
Спасибо. Мне удалось заставить его работать, сохраняя локальную службу и возвращая наблюдаемый объект, хотя он испускает как текущий, так и новый маршрут. Я просто хочу избежать прямого вызова маршрутизатора во всех своих компонентах, потому что команда Angular всегда меняет эти API. Чем больше вещей я смогу завернуть, тем лучше. - person Smith; 11.05.2018
comment
@ Смит, я тебя понимаю :-) - person alexKhymenko; 11.05.2018

arrow_upward
1
arrow_downward

combLatest предоставляет один вывод в формате массива... Пожалуйста, попробуйте использовать следующее

t$ = combineLatest(
  this.route.params,
  this.route.queryParams
).pipe(
  map(results => ({params: results[0], queryParams: results[1]}))
);
person Abinesh Devadas    schedule 10.05.2018
comment
Спасибо, но когда я пробую это и console.log, параметры всегда пусты. - person Smith; 11.05.2018

arrow_upward
1
arrow_downward

Я наткнулся на ту же проблему, и принятый ответ работает, но если вы одновременно измените параметры маршрута и параметры запроса, подписка будет активирована дважды. Чтобы этого избежать, я использовал distinctUntilChanged:

combineLatest(
      this.route.params.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe)),
      this.route.queryParams.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
    )
      .pipe(map(([params, queryParams]) => ({params, queryParams})))
      .subscribe(({params, queryParams}) => {
         console.log(params, queryParams);
      });
person André    schedule 12.09.2018
comment
Разве вам не нужен пользовательский компаратор, чтобы сделать ваш DifferentUntilChanged более точным? - person G. Stoynev; 13.06.2019