如何在 RxJs 中合并两个流等等？

Question

我有一个反应形式。当我输入并停止 3 秒时 - 它应该是 console.log(form.value)。但是当我点击submit 时——console.log(form.value) 应该立即被记录，并且还可以防止之前等待 3 秒的console.log()。在我打字之后 - 而不是按 submit - 它应该在 3 秒后再次 console.log()。

我是 RxJs 的新手。我刚刚弄清楚如何使用debounceTime() 运算符制作第一部分。但我无法理解如何将提交事件“注入”表单流并阻止它来自console.log()；

Link on stackblitz

component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="name" placeholder="name"><br>
  <input type="text" formControlName="age" placeholder="age"><br>

  <button>Save</button>
</form>

component.ts

export class AppComponent implements OnInit  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      'name': [],
      'age': []
    });

    this.form.valueChanges.pipe(
      debounceTime(3000)
    ).subscribe(value => console.log(value));
  }

  onSubmit() {
    console.log(this.form.value);
  }
}

预期行为：

当我打字时，停下 2 秒 - 没有任何反应，如果我停下 3 秒或更长时间，然后console.log(form.value);

当按下submit 时应立即console.log(form.value) 并取消先前对第一个案例的等待。

Answer 1

解决方案： https://stackblitz.com/edit/angular-gn1dwx

所以，在流中思考，我们有：

• 提交流
• 去抖动的更改事件流

我们希望避免重复事件。因此，我们合并 2 个流，并添加 distinctUntilChanged 运算符以避免重复值。我们序列化/反序列化，因为我们不希望 distinct 对实例进行操作，而是对值进行操作。

为了在这个组件被销毁时清理我们的订阅，我们使用 takeUntil 来自动关闭 observable，它会自动处理我们的订阅（总是清理订阅！）

注意：更改一个值，等待4秒再点击提交不会触发订阅。我认为这是预期的行为。

Answer 2

您可以在提交表单时简单地从 Observable 中unsubscribe。

Check it out

export class AppComponent implements OnInit  {
  form: FormGroup;

  subscription;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      'name': [],
      'age': []
    });

    this.subscription = this.form.valueChanges.pipe(
      debounceTime(3000)
    ).subscribe(value => console.log(value));
  }

  onSubmit() {
    this.subscription.unsubscribe();
    console.log(this.form.value);
  }
}