如何在 BehaviorSubject<boolean> 上链接订阅？

Question

我有一个 Angular 应用程序，它根据另一个输入字段的内容显示和隐藏一个输入字段。现在我需要在用户输入内容时对第二个字段进行一些自动格式化。但是当组件加载时该字段是隐藏的，所以我需要检查第一个字段的值以检查是否应该显示第二个字段，然后在它可见时订阅它的 valueChanges。

我的代码如下所示：

export class MyInputComponent implements AfterViewInit {
  private subscription = Subscription.EMPTY;

  @ViewChild('firstInput', { read: NgControl }}
  public firstInput: NgControl;

  @ViewChild('secondInput', { read: NgControl }}
  public secondInput: NgControl;

  public isSecondInputVisible = new BehaviorSubject<boolean>(false);

  public ngAfterViewInit() {
    this.firstInput.valuesChanges!.subscribe((first) => {
      this.isSecondInputVisible.next(first.length > 4);
    });

    this.isSecondInputVisible.subscribe((isVisible) => {
      if (isVisible) {
        this.subscription = this.secondInput.valueChanges!.subscribe((value) => {
          // do something...
        });
      } else {
        this.subscription.unsubscribe();
      }
    });
  }
}

我想知道是否有一种方法可以链接订阅，我不会在代码中有太多的缩进和嵌套。我认为使用 pipe 可能是可行的，但我还没有找到方法。

有没有办法优化订阅部分？

Answer 1

您可以使用 concatMap 并在其中 return empty() 以防该字段不可见。

this.isSecondInputVisible
  .pipe(
    concatMap(isVisible => isVisible
      ? this.secondInput.valueChanges!
      : empty()
    )
  )
  .subscribe(valueChanged => /* do something...*/)

如何在 BehaviorSubject<boolean> 上链接订阅？

How to chain subscription on BehaviorSubject<boolean>?

angular

rxjs

observable

behaviorsubject