跟踪角度输入的变化 - TypeScript

在 TypeScript 中，我们可以使用 ngModel 指令来跟踪输入框的变化。然而，有时我们可能需要更细粒度的控制，特别是在处理一些自定义逻辑时，这时候我们可以使用 FormControl 类来监听输入框的变化。

初始化表单控件

首先，在使用 FormControl 前，我们需要初始化表单控件。这可以通过 FormBuilder 类来实现，如下所示：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `<input [formControl]="nameControl">`,
})
export class AppComponent {
  nameControl: FormControl;
  constructor(private fb: FormBuilder) {
    this.nameControl = fb.control('');
  }
}

在上面的代码中，我们首先引入了 FormControl 和 FormBuilder。然后在组件中我们创建了一个 nameControl 的属性，并在构造函数中使用 FormBuilder 创建了一个名为 nameControl 的表单控件。

监听表单控件变化

我们可以使用 subscribe 方法来监听表单控件的变化。例如，我们可以在每次输入框输入的同时，输出输入框的值：

import { Component } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `<input [formControl]="nameControl">`,
})
export class AppComponent {
  nameControl: FormControl;
  constructor(private fb: FormBuilder) {
    this.nameControl = fb.control('');
    this.nameControl.valueChanges.subscribe((value: string) => {
      console.log(value);
    });
  }
}

在上面的代码中，我们在组件构造函数中使用 subscribe 方法来监听 nameControl 的值变化，并在回调函数中输出输入框的值。

使用 debounceTime 延迟输出

在实际应用中，我们可能不希望每次输入框的值变化都会触发回调函数。这时，我们可以使用 debounceTime 方法来延迟输出。

import { Component } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `<input [formControl]="nameControl">`,
})
export class AppComponent {
  nameControl: FormControl;
  constructor(private fb: FormBuilder) {
    this.nameControl = fb.control('');
    this.nameControl.valueChanges.pipe(debounceTime(500)).subscribe((value: string) => {
      console.log(value);
    });
  }
}

在上述代码中，我们使用了 pipe 方法将 debounceTime 定义的 500 毫秒的延迟应用到了 valueChanges 可观察对象中。这将在用户停止输入 500 毫秒之后，通过调用 subscribe 方法的回调函数来输出当前输入框的值。

使用 distinctUntilChanged 避免重复输出

同样，在实际应用中，我们还需要避免重复输出。这时，我们可以使用 distinctUntilChanged 方法来避免连续输出相同的值。

import { Component } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `<input [formControl]="nameControl">`,
})
export class AppComponent {
  nameControl: FormControl;
  constructor(private fb: FormBuilder) {
    this.nameControl = fb.control('');
    this.nameControl.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),
    ).subscribe((value: string) => {
      console.log(value);
    });
  }
}

在上述代码中，我们使用了 distinctUntilChanged 方法来避免连续输出相同的值。这将在表单控件值有变化时，仅在上一个值与当前值不同时输出当前值。

总结

在 TypeScript 中跟踪输入框的变化不是一件困难的事情。我们可以通过 FormControl 来监听输入框的变化，也可以使用 debounceTime 来延迟输出，并使用 distinctUntilChanged 来避免重复输出。我相信这些方法对于你在实际应用中处理输入框的变化以及其他许多场景都会有很大的帮助。