在 ngOnInit() 方法中切换两个订阅

Question

我有一个页面，我在其中将发票填充到网格中。在网格中有一个选项可以查看特定发票的付款。该按钮将用户从发票页面切换到付款页面，然后在该页面过滤所有付款，以便仅显示与该特定发票对应的付款。此外，当单击付款页面本身时，它会将所有付款填充到网格中。我在 ngOnInit() 方法中完成了这两件事，但是，我需要能够在两者之间切换。换句话说，我想在用户单击发票页面上的按钮以及当用户单击导航栏中的付款选项卡时过滤付款，我希望它显示所有付款。所以，我已经测试了这两个订阅并且知道它们可以工作，但是我怎样才能在两个订阅之间切换来完成这个呢？任何帮助表示赞赏。

我在 if 语句中使用了不同的变量和相等性检查，甚至尝试更改 if 语句的行位置，但没有占上风

ngOnInit() {
  this.sub = this.route.params.subscribe(
    params => {
      if (params == null) { //HERE LIES THE ISSUE
         this.invoiceNum = params['invoiceNum'];

         //displays FILTERED payments
        this.paymentService.showPayments(this.invoiceNum).subscribe(
        res => {
          this.payments = res.value;
          this.loading = false;
          console.log(res);
        },  
        err => {
          if (err.status == 401) {
            this.auth.logOut();
          }
          this.loading = false;
          console.log(err);
        }
      );
    } else {

      //displays ALL payments
      this.paymentService.getPayments().subscribe(
        res => {
          this.payments = res.value;
          this.loading = false;
          console.log(res);
        },
        err => {
          if (err.status == 401) {
            this.auth.logOut();
          }
          this.loading = false;
          console.log(err);
        }
      );
    }
   }
 );
}

Answer 1

您可以使用switchMap。 switchMap 可以为一个条件返回不同的主题。

此解决方案将Route Parameter Changes 主题切换为HTTP Request for payments 主题。如果路由器参数包含invoiceNum，它将返回invoiceNum 的特定付款主题。或者，它将返回所有付款的主题。

您可以在这两种情况下重复使用 onNext/onError 回调。

ngOnInit() {
  this.sub = this.route.params
  .pipe(
    switchMap(params => {
      if (params['invoiceNum'] !== undefined) {
        //displays FILTERED payments
        return this.paymentService.showPayments(this.invoiceNum);
      } else {
        //displays ALL payments
        this.paymentService.getPayments();
      }
    })
  )
  // Reuse onNext/onError callbacks
  .subscribe(
    res => {
      this.payments = res.value;
      this.loading = false;
      console.log(res);
    },  
    err => {
      if (err.status == 401) {
        this.auth.logOut();
      }
      this.loading = false;
      console.log(err);
    }
  );
}