角度和去抖动

Question

角度和去抖动

在AngularJS中，我可以使用ng-model选项去抖模型。

ng-model-options="{ debounce: 1000 }"

如何在Angular中去抖模型？我试图在文档中搜索debounce，但我找不到任何东西。

https://angular.io/search/#stq=debounce&stp=1

一个解决方案是编写我自己的去抖函数，例如：

import {Component, Template, bootstrap} from 'angular2/angular2';// Annotation section@Component({
  selector: 'my-app'})@Template({
  url: 'app.html'})// Component controllerclass MyAppComponent {
  constructor() {
    this.firstName = 'Name';
  }

  changed($event, el){
    console.log("changes", this.name, el.value);
    this.name = el.value;
  }

  firstNameChanged($event, first){
    if (this.timeoutId) window.clearTimeout(this.timeoutID);
    this.timeoutID = window.setTimeout(() => {
        this.firstName = first.value;
    }, 250)
  }}bootstrap(MyAppComponent);

而我的HTML

<input type=text [value]="firstName" #first (keyup)="firstNameChanged($event, first)">

但是我正在寻找一个内置函数，Angular中有一个吗？

Answer 1

它可以作为指令实施import&nbsp;{&nbsp;Directive,&nbsp;Input,&nbsp;Output,&nbsp;EventEmitter,&nbsp;OnInit,&nbsp;OnDestroy&nbsp;}&nbsp;from&nbsp;'@angular/core';import&nbsp;{&nbsp;NgControl&nbsp;}&nbsp;from&nbsp;'@angular/forms';import&nbsp;'rxjs/add/operator/debounceTime';import&nbsp;'rxjs/add/operator/distinctUntilChanged';import&nbsp;{&nbsp;Subscription&nbsp;}&nbsp;from&nbsp;'rxjs';@Directive({ &nbsp;&nbsp;selector:&nbsp;'[ngModel][onDebounce]',})export&nbsp;class&nbsp;DebounceDirective&nbsp;implements&nbsp;OnInit,&nbsp;OnDestroy&nbsp;{ &nbsp;&nbsp;@Output() &nbsp;&nbsp;public&nbsp;onDebounce&nbsp;=&nbsp;new&nbsp;EventEmitter<any>(); &nbsp;&nbsp;@Input('debounce') &nbsp;&nbsp;public&nbsp;debounceTime:&nbsp;number&nbsp;=&nbsp;300; &nbsp;&nbsp;private&nbsp;isFirstChange:&nbsp;boolean&nbsp;=&nbsp;true; &nbsp;&nbsp;private&nbsp;subscription:&nbsp;Subscription; &nbsp;&nbsp;constructor(public&nbsp;model:&nbsp;NgControl)&nbsp;{ &nbsp;&nbsp;} &nbsp;&nbsp;ngOnInit()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.subscription&nbsp;= &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.valueChanges&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.debounceTime(this.debounceTime) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.distinctUntilChanged() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.subscribe(modelValue&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.isFirstChange)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.isFirstChange&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.onDebounce.emit(modelValue); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;} &nbsp;&nbsp;ngOnDestroy()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.subscription.unsubscribe(); &nbsp;&nbsp;}}用它就像<input&nbsp;[(ngModel)]="value"&nbsp;(onDebounce)="doSomethingWhenModelIsChanged($event)">组件样本import&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;"@angular/core";@Component({ &nbsp;&nbsp;selector:&nbsp;'app-sample', &nbsp;&nbsp;template:&nbsp;` <input[(ngModel)]="value"&nbsp;(onDebounce)="doSomethingWhenModelIsChanged($event)"> <input[(ngModel)]="value"&nbsp;(onDebounce)="asyncDoSomethingWhenModelIsChanged($event)"> `})export&nbsp;class&nbsp;SampleComponent&nbsp;{ &nbsp;&nbsp;value:&nbsp;string; &nbsp;&nbsp;doSomethingWhenModelIsChanged(value:&nbsp;string):&nbsp;void&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;console.log({&nbsp;value&nbsp;}); &nbsp;&nbsp;} &nbsp;&nbsp;async&nbsp;asyncDoSomethingWhenModelIsChanged(value:&nbsp;string):&nbsp;Promise<void>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise<void>(resolve&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('async',&nbsp;{&nbsp;value&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;}}