使用rxjs运算符调查ActivateRouteRoute可观察对象

时间:2018-11-11 11:50:10

标签: angular rxjs5 angular-observable angular-activatedroute

我有一个非常简单的请求: 我想研究activateRoute可观察对象(paramMap和queryParamMap)-我想根据它们的结果设置组件变量。 尝试使用rxjs运算符pipe和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*/);

2 个答案:

答案 0 :(得分:1)

实际上,您应该使用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*/);

答案 1 :(得分:1)

如果您始终想要两者的最新值,请使用CombineLatest。

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