项目初始化

src/app/shared/components/delay/delay.directive.ts

@@ -0,0 +1,45 @@
+import { AfterViewInit, Directive, EventEmitter, Input, OnDestroy, Optional, Output } from '@angular/core';
+import { NgModel } from '@angular/forms';
+import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util';
+import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Directive({
+  selector: '[delay]:not([noDelay])',
+  exportAs: 'delayComp'
+})
+export class DelayDirective implements AfterViewInit, OnDestroy {
+  static ngAcceptInputType_delayTime: NumberInput;
+  static ngAcceptInputType_delayFirstEmit: BooleanInput;
+
+  private data$: Subscription | undefined;
+  private firstEmit = false;
+
+  @Input() @InputNumber() delayTime = 500;
+  @Input() @InputBoolean() delayFirstEmit = false;
+  @Output() readonly delayChange = new EventEmitter<any>();
+
+  constructor(@Optional() private ngModel: NgModel) {}
+
+  ngAfterViewInit(): void {
+    const { ngModel, delayFirstEmit, delayTime, delayChange } = this;
+    if (ngModel == null) {
+      return;
+    }
+
+    this.firstEmit = delayFirstEmit;
+    this.data$ = ngModel.valueChanges?.pipe(debounceTime(delayTime), distinctUntilChanged()).subscribe(res => {
+      if (this.firstEmit === false) {
+        this.firstEmit = true;
+        return;
+      }
+      delayChange.emit(res);
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.data$) {
+      this.data$.unsubscribe();
+    }
+  }
+}

src/app/shared/components/delay/delay.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { DelayDirective } from './delay.directive';
+
+const COMPONENTS = [DelayDirective];
+
+@NgModule({
+  declarations: COMPONENTS,
+  exports: COMPONENTS
+})
+export class DelayModule {}

src/app/shared/components/delay/index.en-US.md

@@ -0,0 +1,19 @@
+---
+order: 30
+title: delay
+type: Component
+---
+
+Delay trigger, for title search, [DEMO](https://preview.ng-alain.com/pro/#/other/article).
+
+```html
+<input nz-input [(ngModel)]="q" delay (delayChange)="load()" />
+```
+
+## API
+
+| Property           | Description                            | Type                | Default |
+|--------------------|----------------------------------------|---------------------|---------|
+| `[delayTime]`      | Delay time (unit: ms)                  | `number`            | `500`   |
+| `[delayFirstEmit]` | Whether to trigger after `delayChange` | `boolean`           | `false` |
+| `(delayChange)`    | Callback event                         | `EventEmitter<any>` | -       |

src/app/shared/components/delay/index.ts

@@ -0,0 +1,2 @@
+export * from './delay.directive';
+export * from './delay.module';

src/app/shared/components/delay/index.zh-CN.md

@@ -0,0 +1,19 @@
+---
+order: 30
+title: delay
+type: Component
+---
+
+延迟触发，适用于标题搜索，参考[示例](https://preview.ng-alain.com/pro/#/other/article)。
+
+```html
+<input nz-input [(ngModel)]="q" delay (delayChange)="load()" />
+```
+
+## API
+
+| 参数               | 说明                         | 类型                | 默认值  |
+|--------------------|----------------------------|---------------------|---------|
+| `[delayTime]`      | 延迟时间（单位：毫秒）          | `number`            | `500`   |
+| `[delayFirstEmit]` | 是否加载后触发 `delayChange` | `boolean`           | `false` |
+| `(delayChange)`    | 回调函数                     | `EventEmitter<any>` | -       |