angular7 封装搜索控件

点击搜索图标，回车，删光都会执行搜索方法

html：

<div class="list-toolbar">
  <ul class="list-search-bar">
    <li>
      <form nz-form>
        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input class="list-search-input" maxlength="50" (keyup)="isEmpty($event)" [placeholder]="placehoder"
            [(ngModel)]="searchValue" (ngModelChange)="emitSearchValue()" name="pageName" MaInputTrim/>
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzType="default" (click)="searchLabelName()" nzSearch>
            <i nz-icon nzType="search"></i>
          </button>
        </ng-template>
      </form>
    </li>
  </ul>
</div>

ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as _ from 'lodash';

@Component({
  selector: 'table-search-input',
  templateUrl: './table-search-input.component.html',
  styleUrls: ['./table-search-input.component.less']
})
export class TableSearchInputComponent {
  @Input() searchValue: string;//搜索输入框的值
  @Input() placehoder: string = '请输入';//placeholder
  @Output() refreshList: EventEmitter<void> = new EventEmitter<void>();//点击搜索执行的方法
  @Output() searchValueChange: EventEmitter<string> = new EventEmitter<string>();
  lastSearchValue: string;
  constructor() {}

  /**
   * 删除为空的时候，重新刷新列表
   */
  isEmpty(event): void{
    //不是按删除键或者值不是空的时候，return
    if(event.keyCode !== 8) {
      this.lastSearchValue = this.searchValue;
      return;
    }
    if(this.searchValue === '' || _.isNil(this.searchValue)) {
      if(this.lastSearchValue === this.searchValue) {
        return;
      }
      this.refreshList.emit();
    }
    this.lastSearchValue = this.searchValue;
  }

  /**
   * 搜索
   */
  searchLabelName(): void{
    if (this.searchValue === '' || _.isNil(this.searchValue)) {
      return;
    }
    this.refreshList.emit();
  }

  /**
   * 将搜索值返回出去
   */
  emitSearchValue(): void{
    this.searchValueChange.emit(this.searchValue);
  }
}

页面引用：

<table-search-input [(searchValue)]="searchValue" 
(refreshList)="searchLabelName()" 
[placehoder]="'请输入会员卡名称'"></table-search-input>

基于：

"ng-zorro-antd": "^7.5.1",

angular7