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并在其中返回empty()，以防字段不可见。

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

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

1 个答案: