如何在Angular的table-component中添加自定义过滤功能？

要实现你想要的<custom-filtering>插槽式自定义过滤，核心是利用Angular的内容投影（Content Projection）特性，具体是具名内容投影，下面分步骤来实现：

1. 修改table-component的模板，添加具名插槽 #

在你的表格组件模板（比如table-component.component.html）中，找到你想要放置自定义过滤内容的位置（通常在表格上方的过滤栏区域），添加带有select属性的<ng-content>标签，指定选择器为custom-filtering：

<!-- 表格组件模板 -->
<div class="table-filter-bar">
  <!-- 原有标准过滤组件 -->
  <div class="default-filters">
    <!-- 你的默认过滤UI，比如搜索框、下拉筛选等 -->
    <input type="text" placeholder="默认搜索" [(ngModel)]="defaultFilterValue" (input)="onDefaultFilterChange()">
  </div>

  <!-- 自定义过滤插槽：匹配<custom-filtering>标签内的内容 -->
  <ng-content select="custom-filtering"></ng-content>
</div>

<!-- 表格主体 -->
<table>
  <!-- 表格内容逻辑 -->
</table>

这样，当父组件（页面组件）在<table-component>内部写<custom-filtering>标签时，里面的内容就会被投影到这个位置。

2. 实现自定义过滤与表格组件的逻辑交互 #

光有内容投影还不够，自定义过滤的控件需要能触发表格的过滤逻辑。这里有两种常见的实现方式：

方式一：表格组件暴露公共方法，父组件调用 #

在table-component.component.ts中，添加一个公共方法用于执行过滤（比如接收自定义过滤参数，和默认过滤参数合并后过滤表格数据）：

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

@Component({
  selector: 'table-component',
  templateUrl: './table-component.component.html',
  styleUrls: ['./table-component.component.css']
})
export class TableComponent {
  @Input() data: any[] = []; // 表格数据源
  filteredData: any[] = [];
  defaultFilterValue = '';

  ngOnInit() {
    this.filteredData = [...this.data];
  }

  // 默认过滤方法
  onDefaultFilterChange() {
    this.applyFilters(this.defaultFilterValue, null);
  }

  // 暴露给父组件的公共过滤方法，接收自定义过滤参数
  applyCustomFilters(customParams: any) {
    this.applyFilters(this.defaultFilterValue, customParams);
  }

  // 核心过滤逻辑：合并默认和自定义参数
  private applyFilters(defaultValue: string, customParams: any) {
    this.filteredData = this.data.filter(item => {
      // 默认过滤逻辑：比如匹配名称
      const matchesDefault = item.name.includes(defaultValue);
      // 自定义过滤逻辑：根据父组件传入的customParams判断，这里可以灵活扩展
      let matchesCustom = true;
      if (customParams) {
        // 示例：假设customParams有一个status字段，匹配item的status
        matchesCustom = item.status === customParams.status;
      }
      return matchesDefault && matchesCustom;
    });
  }
}

然后在父组件（页面组件）中，通过@ViewChild获取表格组件实例，当自定义过滤控件变化时调用其公共方法：

<!-- 页面组件模板 -->
<table-component #myTable [data]="pageData">
  <custom-filtering>
    <div>
      <label>状态筛选：</label>
      <select [(ngModel)]="selectedStatus" (change)="onCustomFilterChange()">
        <option value="">全部</option>
        <option value="active">活跃</option>
        <option value="inactive">非活跃</option>
      </select>
    </div>
  </custom-filtering>
</table-component>

import { Component, ViewChild } from '@angular/core';
import { TableComponent } from './table-component/table-component.component';

@Component({
  selector: 'page-component',
  templateUrl: './page-component.component.html',
  styleUrls: ['./page-component.component.css']
})
export class PageComponent {
  pageData = [/* 页面数据源 */];
  selectedStatus = '';

  @ViewChild('myTable') tableComponent!: TableComponent;

  onCustomFilterChange() {
    // 传入自定义过滤参数
    this.tableComponent.applyCustomFilters({ status: this.selectedStatus });
  }
}

方式二：通过@Output事件和@Input参数双向绑定 #

如果不想用@ViewChild，可以让表格组件定义一个输入参数，父组件传递过滤参数，表格组件监听参数变化自动触发过滤：

在table-component.component.ts中添加：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

// ... 其他代码

@Input() customFilterParams: any;

// 监听customFilterParams变化，自动触发过滤
ngOnChanges(changes: SimpleChanges) {
  if (changes['customFilterParams']) {
    this.applyFilters(this.defaultFilterValue, this.customFilterParams);
  }
}

父组件模板和代码调整：

<!-- 页面组件模板 -->
<table-component [data]="pageData" [customFilterParams]="{ status: selectedStatus }">
  <custom-filtering>
    <div>
      <label>状态筛选：</label>
      <select [(ngModel)]="selectedStatus">
        <option value="">全部</option>
        <option value="active">活跃</option>
        <option value="inactive">非活跃</option>
      </select>
    </div>
  </custom-filtering>
</table-component>

这样，当selectedStatus变化时，customFilterParams会自动更新，表格组件的ngOnChanges会触发过滤。

3. 可选：添加插槽默认内容（如果需要） #

如果有些页面不需要自定义过滤，你可以给<ng-content>添加默认内容，这样没有<custom-filtering>标签时会显示默认内容：

<ng-content select="custom-filtering">
  <!-- 默认内容：比如一个空的占位符或者提示 -->
  <div class="no-custom-filter">无自定义过滤</div>
</ng-content>

这样就完成了自定义过滤的插槽式实现，各个页面可以根据需要自由插入不同的过滤UI，同时和表格组件的过滤逻辑无缝交互。

内容的提问来源于stack exchange，提问作者Dev Db