Angular4多标签页列表优化：仅对当前选中标签页应用过滤器

嘿，这个性能优化的需求太合理了——没必要给用户没看到的列表做过滤操作，纯粹是浪费算力。我给你几个从易到优的实现思路，你可以根据自己的项目情况选：

方案1：利用标签页激活状态控制管道执行 #

如果想保留现有管道的写法，最简单的方式就是只在当前激活的标签页上应用过滤器管道，其他标签页直接用原始数组。

首先在组件类里维护当前激活的标签页索引：

currentActiveTab = 0; // 默认第一个标签页激活

然后在模板里判断，只有当前标签页激活时才走过滤器：

<!-- 第一个标签页的表格 -->
<tr *ngFor="let item of (currentActiveTab === 0 ? firstTabItems | filterNameFilter: someType : firstTabItems) | orderBy: sortOrder">
  <!-- 表格内容 -->
</tr>

<!-- 第二个标签页同理 -->
<tr *ngFor="let item of (currentActiveTab === 1 ? secondTabItems | filterNameFilter: someType : secondTabItems) | orderBy: sortOrder">
  <!-- 表格内容 -->
</tr>

最后监听标签页的切换事件，更新currentActiveTab的值。比如用Angular Material的mat-tab-group的话：

<mat-tab-group (selectChange)="onTabChanged($event)">
  <mat-tab label="标签页1">...</mat-tab>
  <mat-tab label="标签页2">...</mat-tab>
  <!-- 其他标签页 -->
</mat-tab-group>

组件类里补充方法：

onTabChanged(event: MatTabChangeEvent) {
  this.currentActiveTab = event.index;
}

这个方案改动最小，立刻就能生效，但要注意：如果你的orderBy是自定义管道，它还是会对所有标签页的数组执行，不过过滤器的性能开销已经省下来了。

方案2：把过滤+排序逻辑移到组件类（最优推荐） #

Angular的管道（尤其是不纯管道）会在每次变更检测时执行，长期来看，把过滤和排序逻辑移到组件类里会更可控，性能也更好。

步骤1：组件类里维护过滤后的数组 #

// 原始数据集
firstTabItems: any[];
secondTabItems: any[];
thirdTabItems: any[];
fourthTabItems: any[];

// 过滤后的数据集
firstTabFilteredItems: any[];
secondTabFilteredItems: any[];
thirdTabFilteredItems: any[];
fourthTabFilteredItems: any[];

currentActiveTab = 0;
someType: string;
sortOrder: string = 'asc'; // 默认升序

步骤2：编写过滤+排序的方法 #

只对当前激活的标签页对应的数组做处理：

updateCurrentTabData() {
  const filterFn = (item: any) => item.type === this.someType;
  const sortFn = (a: any, b: any) => {
    // 这里根据你的排序字段调整，比如按name排序
    if (a.name < b.name) return this.sortOrder === 'asc' ? -1 : 1;
    if (a.name > b.name) return this.sortOrder === 'asc' ? 1 : -1;
    return 0;
  };

  switch(this.currentActiveTab) {
    case 0:
      this.firstTabFilteredItems = this.firstTabItems.filter(filterFn).sort(sortFn);
      break;
    case 1:
      this.secondTabFilteredItems = this.secondTabItems.filter(filterFn).sort(sortFn);
      break;
    case 2:
      this.thirdTabFilteredItems = this.thirdTabItems.filter(filterFn).sort(sortFn);
      break;
    case 3:
      this.fourthTabFilteredItems = this.fourthTabItems.filter(filterFn).sort(sortFn);
      break;
  }
}

步骤3：触发数据更新的时机 #

• 当过滤器参数someType变化时：

  @Input() set someType(value: string) {
    this._someType = value;
    this.updateCurrentTabData();
  }
  private _someType: string;
  

• 当标签页切换时：

  onTabChanged(event: MatTabChangeEvent) {
    this.currentActiveTab = event.index;
    // 如果切换到的标签页还没过滤过，或者过滤器参数已经变了，就更新数据
    if (!this.getFilteredTabArray()) {
      this.updateCurrentTabData();
    }
  }
  
  // 辅助方法：获取当前激活标签页对应的过滤后数组
  private getFilteredTabArray(): any[] | undefined {
    switch(this.currentActiveTab) {
      case 0: return this.firstTabFilteredItems;
      case 1: return this.secondTabFilteredItems;
      case 2: return this.thirdTabFilteredItems;
      case 3: return this.fourthTabFilteredItems;
      default: return undefined;
    }
  }
  

• 当排序规则sortOrder变化时，同样调用updateCurrentTabData()即可。

步骤4：模板里直接用过滤后的数组 #

<!-- 第一个标签页的表格 -->
<tr *ngFor="let item of firstTabFilteredItems">
  <!-- 表格内容 -->
</tr>

这个方案的优势在于：

• 只有当当前激活标签页变化或者过滤器/排序参数变化时，才会执行过滤和排序逻辑
• 只处理用户正在看的那个列表，完全避免了不必要的计算
• 摆脱了自定义管道的变更检测开销，性能更稳定

额外注意点 #

1. 如果你的数据集很大，可以考虑加入防抖处理，比如在someType变化时延迟300ms再执行过滤，避免用户快速切换过滤器时频繁触发计算。
2. Angular官方不推荐使用自定义的orderBy管道，因为它会导致频繁的变更检测，所以把排序逻辑移到组件类里也是符合最佳实践的。

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