1、创建指令
// 以下命令会创建DebounceDirective指令并自动添加到AppModule
ng g directive directive/debounce
2、相关代码
// app.component.html
<input appDebounce [debounceTime]='2000' (debounceKeyup)="testDebounceKeyup($event)" />
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.styl']
})
export class AppComponent {
testDebounceKeyup(event: any) {
console.log("Keyup被节流了!");
}
}
// debounce.directive.ts
import { Directive, EventEmitter, HostListener, Input, Output, OnInit, OnDestroy } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { Subject, Subscription } from 'rxjs/';
@Directive({
selector: '[appDebounce]'
})
export class DebounceDi