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 Observables 并手动调用 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中文网其他相关文章！
