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

Angular에서 디바운스

질문:

Angular에서 디바운스를 어떻게 구현할 수 있나요?

답변:

Angular 2에서는 양식 제어 값 변경 시 RxJS 연산자를 사용하여 디바운싱을 수행할 수 있습니다. 예:

<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>

이 코드는 1000밀리초 지연으로 키 입력 이벤트를 디바운싱합니다.

최적화 기술:

위 접근 방식은 다음과 같습니다. 유효하면 불필요하게 변경 감지를 트리거할 수 있습니다. 효율성을 위해 Angular의 변경 감지 영역 외부에 RxJS Observable을 생성하고 ChangeDetectorRef.DetectChanges()를 수동으로 호출하는 것이 좋습니다.

<code class="typescript">import {Component, NgZone, ChangeDetectorRef, ApplicationRef, 
        ViewChild, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `<input #input type=text [value]="firstName">
    <br>{{firstName}}`
})
export class AppComponent {
  ngAfterViewInit() {
    Observable.fromEvent(this.inputElRef.nativeElement, 'keyup')
      .debounceTime(1000)
      .subscribe(keyboardEvent => {
        this.firstName = keyboardEvent.target.value;
        this.cdref.detectChanges();
      });
  }
}</code>

이 접근 방식은 불필요한 변경 감지를 방지하여 성능을 향상시킵니다.

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