Angular 实现RxJs运算符而不是嵌套的订阅块

Angular 实现RxJs运算符而不是嵌套的订阅块,angular,rxjs,graphql,angular-router,rxjs-pipeable-operators,Angular,Rxjs,Graphql,Angular Router,Rxjs Pipeable Operators,我从路由参数中得到一个id,并将其传递给我的API调用。为此,我目前正在使用嵌套订阅。但是我想使用concat()或者RxJs的其他操作符(我不知道是哪个),这样就可以避免嵌套。由于文档没有给出一些示例,这让我很困惑,我如何在代码中使用它 下面是实现嵌套的代码,我想使用concat()或者RxJs的其他操作符实现相同的逻辑 this.route.params.subscribe((params: Params) => { this.selectedPostId = +params['i

我从路由参数中得到一个
id
,并将其传递给我的API调用。为此,我目前正在使用嵌套订阅。但是我想使用
concat()
或者RxJs的其他操作符(我不知道是哪个),这样就可以避免嵌套。由于文档没有给出一些示例,这让我很困惑,我如何在代码中使用它

下面是实现嵌套的代码,我想使用
concat()
或者RxJs的其他操作符实现相同的逻辑

this.route.params.subscribe((params: Params) => {
  this.selectedPostId = +params['id'];
  if (this.selectedPostId) {
    // Simple GraphQL API call below
    this.apollo.watchQuery(GetPost, {id: this.selectedPostId})
      .subscribe((post: PostType) => {
        if (post) {
          console.log(post);
        }
      });
  }
});

您真正需要的运算符是
flatMap

import { map, flatMap, filter } from 'rxjs/operators';

// ...


this.route.params.pipe(
        map((params: Params) => +params['id']), // Get the ID param
        filter((selectedPostId: any) => selectedPostId), // Remove any events without an ID
        flatMap(id => this.apollo.watchQuery(GetPost, {id: selectedPostId})) // Call the watchQuery function
    ).subscribe((post: PostType) => {
        if (post) {
          console.log(post);
        }
    });

您真正需要的运算符是
flatMap

import { map, flatMap, filter } from 'rxjs/operators';

// ...


this.route.params.pipe(
        map((params: Params) => +params['id']), // Get the ID param
        filter((selectedPostId: any) => selectedPostId), // Remove any events without an ID
        flatMap(id => this.apollo.watchQuery(GetPost, {id: selectedPostId})) // Call the watchQuery function
    ).subscribe((post: PostType) => {
        if (post) {
          console.log(post);
        }
    });

您不能使用concat,您需要第一个可观察对象的输出作为第二个可观察对象的输入。你可以使用filter和flatMap(使用pipe,具体取决于RxJS版本)。@jornsharpe你能告诉我如何使用它吗?你能自己花一分钟以上的时间来研究它吗?你不能使用concat,你需要第一个可观测的输出作为第二个的输入。你可以使用过滤器和平面图(带管道,取决于RxJS版本)。@jonrsharpe你能告诉我如何使用它吗?你能自己花一分钟多看看吗?@jonrsharpe发现得很好,从那里复制粘贴作业不正确me@user184994
TypeError:this.route.params.map不是函数
,尽管我有imported@YashwardhanPauranik正如我在评论中提到的,RxJS的较新版本需要
.pipe
@jornsharpe的良好定位,从那里复制粘贴作业不正确me@user184994
TypeError:this.route.params.map不是函数
,尽管我有imported@YashwardhanPauranik正如我在评论中提到的,RxJS的较新版本将需要
.pipe