Question

我花了至少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));

我还注意到，由于某种原因，combinedLatest不在'rxjs / operators'中。 Observable.combineLatest也不起作用。

感谢。

Answer 1

使用rxjs6时，不再有结果选择器，因此您需要使用“map”。有关迁移的文档rxjs migration guide

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

Answer 2

combineLatest以数组格式提供一个输出... 请尝试使用如下

t$ = combineLatest(
  this.route.params,
  this.route.queryParams
).pipe(
  map(results => ({params: results[0], queryParams: results[1]}))
);

Answer 3

我偶然发现了相同的问题和可接受的答案，但是如果同时更改路由参数和查询参数，订阅将被触发两次。为了避免这种情况，我使用了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);
      });

Angular / RxJs 6 - 结合路线参数和查询参数不再起作用

3 个答案: