使用 rxjs 运算符调查 activatedRoute observables

Investigate activatedRoute observables using rxjs operators

我有一个很简单的要求: 我想研究 activateRoute observables(paramMap 和 queryParamMap)——我想根据它们的结果设置组件变量。 尝试使用 rxjs 运算符管道和 flatMap 来做到这一点,但未能成功。 查看我的代码:

param1: number;
param2: string;


ngOnInit() {
  this.activatedRoute.paramMap.pipe(
    flatMap(params => {
      this.param1 = +params.get(<name Of Param>);
      return this.activatedRoute.queryParamMap;
    }),
    flatMap(queryParams => {
      this.param2= queryParams.get(<name of query param>);
    })
  ).subscribe(result => /*no need to do anything*/);

实际上你应该使用 switchMap 而不是 mergeMap 因为你不需要最后所有 Observable 的结果。

param1: number;
param2: string;

ngOnInit() {
  this.activatedRoute.paramMap.pipe(
    switchMap(params => {
      this.param1 = +params.get(<name Of Param>);
      return this.activatedRoute.queryParamMap;
    }),
    map(queryParams => {
      this.param2= queryParams.get(<name of query param>);
    })
  ).subscribe(result => /*no need to do anything*/);

如果您总是想要两者的最新值,请使用 combineLatest。

combineLatest(
    this.activatedRoute.paramMap,
    this.activatedRoute.queryParamMap
).subscribe( ([paramMap, queryParamMap]) =>
    // do stuff here
);