RxJS를 사용하여 Angular에서 사용자 입력을 디바운스하는 방법은 무엇입니까?

Angular 2를 사용한 디바운싱

AngularJS는 ng-model-options 지시문을 사용하여 모델을 디바운스하는 편리한 방법을 제공했습니다. 그러나 Angular에는 이 기능을 구현하는 기본 제공 방법이 없습니다.

RxJS를 사용한 디바운싱

Angular는 반응형 프로그래밍에 RxJS를 활용하여 관찰 가능 항목을 생성하는 수단을 제공합니다. 이벤트 처리, 데이터 스트림 등에 사용할 수 있습니다. RxJS는 가장 최근 방출 이후 지정된 기간이 경과한 후에만 값을 방출하는 debounceTime() 연산자를 제공합니다.

RxJS DebounceTime 사용 예

디바운싱을 구현하려면 Angular의 경우 다음 단계를 따르세요.

<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() {
    // Debounce keystroke events
    this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
  }
}</code>

이 코드는 debounceTime(1000)을 사용하여 새 값의 방출을 1000밀리초만큼 지연합니다. 해당 기간 내에 발생하는 키 입력은 firstName 속성의 즉각적인 업데이트를 트리거하지 않습니다.

성능 고려 사항

RxJS Observable을 사용한 디바운싱은 트리거되지 않으므로 효율적입니다. 디바운스된 기간이 만료되지 않는 한 변경 감지. 그러나 NgZone.runOutsideAngular()를 사용하여 Angular 영역 외부에서 관찰 가능 항목을 생성하는 것이 성능을 더욱 향상시킬 수 있습니다.

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