Wie implementiert man die Entprellung in Angular 2?

Angular 2-Entprellung

Entprellung ist eine Technik, die in der Programmierung verwendet wird, um die Ausführung einer Aufgabe zu verzögern, bis seitdem eine bestimmte Zeitspanne verstrichen ist der letzte Aufruf dieser Aufgabe. In Angular kann das Entprellen verwendet werden, um die Leistung Ihrer Anwendungen zu verbessern, indem die Häufigkeit, mit der Ihre Anwendung teure Vorgänge ausführt, reduziert wird.

In AngularJS wurde das Entprellen mithilfe der ng-model-options-Direktive gehandhabt. In Angular 2 gibt es jedoch keine integrierte Entprellungsfunktion. Stattdessen können Sie den RxJS-Operator debounceTime() für das beobachtbare valueChanges eines Formularsteuerelements verwenden.

Hier ist ein Beispiel für das Entprellen eines Formularsteuerelements in 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 In diesem Beispiel erstellen wir zunächst ein neues FormControl mit dem Namen firstNameControl. Anschließend abonnieren wir die Observable valueChanges des Formularsteuerelements. Wir verwenden den debounceTime()-Operator, um die Ausführung der Callback-Funktion zu verzögern, bis 1000 Millisekunden seit der letzten Änderung des Eingabewerts vergangen sind.

Der debounceTime()-Operator ist nur einer von vielen möglichen RxJS-Operatoren Wird zur Manipulation und Filterung von Observablen verwendet. Weitere Informationen zu RxJS-Operatoren finden Sie in der RxJS-Dokumentation.

Das obige ist der detaillierte Inhalt vonWie implementiert man die Entprellung in Angular 2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!