如何使用ag-grid CustomFilterComponent构建查找搜索功能

import { IFilterAngularComp } from 'ag-grid-angular';

export class CustomSearchFilterComponent implements IFilterAngularComp {
  private params: any;
  private value: string;

  agInit(params: any): void {
    this.params = params;
  }

  isFilterActive(): boolean {
    return this.value !== null && this.value !== undefined && this.value !== '';
  }

  doesFilterPass(params: any): boolean {
    const cellValue = params.data[this.params.column.colId];
    return cellValue.toLowerCase().indexOf(this.value.toLowerCase()) >= 0;
  }

  getModel(): any {
    return { value: this.value };
  }

  setModel(model: any): void {
    this.value = model.value;
  }

  onFilterChanged(): void {
    this.params.filterChangedCallback();
  }
}

columnDefs = [
  { headerName: 'Name', field: 'name', filter: 'agTextColumnFilter', filterFramework: CustomSearchFilterComponent },
  // 其他列定义...
];

<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
></ag-grid-angular>

import { Component } from '@angular/core';
import { CustomSearchFilterComponent } from './custom-search-filter.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  rowData: any[];
  columnDefs: any[];
  frameworkComponents: any;

  constructor() {
    this.rowData = [
      { name: 'John Doe', age: 30, country: 'USA' },
      { name: 'Jane Smith', age: 25, country: 'Canada' },
      // 其他数据...
    ];

    this.columnDefs = [
      { headerName: 'Name', field: 'name', filter: 'agTextColumnFilter', filterFramework: CustomSearchFilterComponent },
      { headerName: 'Age', field: 'age' },
      { headerName: 'Country', field: 'country' },
      // 其他列定义...
    ];

    this.frameworkComponents = {
      customSearchFilterComponent: CustomSearchFilterComponent
    };
  }
}