多个表的自定义筛选器组件- Angular

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-filter',
  template: `
    <input type="text" [(ngModel)]="filterText" (input)="onFilterChange()" placeholder="Search...">
  `
})
export class FilterComponent {
  @Input() filterText: string = '';
  @Output() filterChange = new EventEmitter<string>();

  onFilterChange() {
    this.filterChange.emit(this.filterText);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
    <app-filter (filterChange)="applyFilter($event)"></app-filter>
    <table>
      <!-- 表格内容 -->
    </table>
  `
})
export class TableComponent {
  data = [
    // 表格数据
  ];

  applyFilter(filterText: string) {
    // 应用筛选逻辑
    this.filteredData = this.data.filter(item => item.name.includes(filterText));
  }
}

// 子组件
@Output() filterChange = new EventEmitter<string>();

onFilterChange() {
  this.filterChange.emit(this.filterText);
}

// 父组件
<app-filter (filterChange)="applyFilter($event)"></app-filter>

// filter.service.ts
@Injectable({ providedIn: 'root' })
export class FilterService {
  applyFilter(data: any[], filterText: string) {
    return data.filter(item => item.name.includes(filterText));
  }
}

// 组件中使用
constructor(private filterService: FilterService) {}

applyFilter(filterText: string) {
  this.filteredData = this.filterService.applyFilter(this.data, filterText);
}