angular中搜索框指令

最新推荐文章于 2021-12-30 09:43:20 发布

晓晓是个打字员

最新推荐文章于 2021-12-30 09:43:20 发布

阅读量409

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_32490291/article/details/103045654

版权

本文介绍了如何在Angular项目中创建一个搜索框指令，以优化频繁的搜索操作。通过引入自定义指令，可以在多个地方复用搜索框功能，提高代码的可维护性和效率。详细代码实现和引用资源链接已提供。

摘要由CSDN通过智能技术生成

之前，我们介绍过angular的请求防抖debounce，可以优化搜索过程。鉴于，输入搜索，在整个项目中，应用会相对频繁，所以，我们可以抽离出来，写成一个指令：

import { Directive, HostListener, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { Subject, Subscription, Observable } from 'rxjs';

import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';

@Directive({
  selector: '[appDebounceInput]'
})
export class DebounceInputDirective {
  searchText$ = new Subject<string>();
  subscription:Subscription

  @Input('time') waitingTime = 500; //等待时间
  @Output() emitTargetValue = new EventEmitter(); //将数据传递出去

  constructor(private _elementRef:ElementRef) { 

  }

  @HostListener('keyup', ['$event']) onKeyDown(ev) {
    ev.preventDefault(); //阻止元素发生默认行为
    ev.stopPropagation() //阻止事件冒泡到父元素
    const value = ev.target.value;
    this.sea