Angular 2에서 디바운싱을 구현하는 방법은 무엇입니까?

Angular 2 디바운싱

디바운싱은 프로그래밍에서 지정된 시간이 경과할 때까지 작업 실행을 지연시키는 데 사용되는 기술입니다. 해당 작업에 대한 가장 최근 호출입니다. Angular에서는 디바운싱을 사용하여 애플리케이션이 비용이 많이 드는 작업을 수행하는 횟수를 줄여 애플리케이션 성능을 향상시킬 수 있습니다.

AngularJS에서 디바운싱은 ng-model-options 지시어를 사용하여 처리되었습니다. 그러나 Angular 2에는 내장된 디바운스 기능이 없습니다. 대신 양식 컨트롤에서 관찰할 수 있는 valueChanges에 RxJS debounceTime() 연산자를 사용할 수 있습니다.

다음은 Angular 2에서 양식 컨트롤을 디바운싱하는 방법에 대한 예입니다.

<code class="typescript">import {Component}   from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable}  from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
    <br>{{firstName}}`
})
export class AppComponent {
  firstName        = 'Name';
  firstNameControl = new FormControl();

  ngOnInit() {
    this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
  }
}</code>

In 이 예에서는 먼저 firstNameControl이라는 새 FormControl을 만듭니다. 그런 다음 양식 컨트롤에서 관찰할 수 있는 valueChanges를 구독합니다. debounceTime() 연산자를 사용하여 마지막 입력 값이 변경된 이후 1000밀리초가 경과할 때까지 콜백 함수의 실행을 지연합니다.

debounceTime() 연산자는 사용할 수 있는 많은 RxJS 연산자 중 하나일 뿐입니다. 관찰 가능 항목을 조작하고 필터링하는 데 사용됩니다. RxJS 연산자에 대한 자세한 내용은 RxJS 문서를 참조하세요.

위 내용은 Angular 2에서 디바운싱을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!