Angular绑定要求传入函数时能否用纯管道替代及优化方案

可以改造为纯管道，你当前的getCellClass逻辑仅依赖event.column.prop，属于输入固定则输出固定的纯计算逻辑，适配纯管道的缓存规则。

具体改造步骤 #

1. 定义纯管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'cellClass',
  pure: true
})
export class CellClassPipe implements PipeTransform {
  transform(columnProp: string): string {
    console.count("cellClassPipe执行计数");
    return columnProp === 'something' ? 'someClass' : 'someOtherClass';
  }
}

记得将该管道加入对应NgModule的declarations数组中。
2. 模板调用
如果你的表格组件支持[cellClass]直接传入字符串值，直接在循环中调用管道即可：

<some-table>
   <some-table-column *ngFor="let column of columns" name="{{column.name}}" [cellClass]="column.prop | cellClass">
      <ng-template let-row="row">
         <div>{{row.getCellValue(column)}}</div>
      </ng-template>
   </some-table-column>
</some-table>

如果表格组件仅支持[cellClass]传入函数类型，可在组件中预绑定管道计算结果：

// 组件中提前处理列配置
processedColumns = this.columns.map(col => ({
  ...col,
  cellClassHandler: () => this.cellClassPipe.transform(col.prop)
}));

模板绑定预生成的函数：

<some-table-column *ngFor="let column of processedColumns" name="{{column.name}}" [cellClass]="column.cellClassHandler">

方案合理性 #

该改造方案合理，纯管道默认会对相同输入的结果做缓存，只要column.prop不发生变更，管道逻辑只会执行一次，后续变更检测不会触发重计算，能完全解决当前函数高频执行的问题。

其他可选优化方案 #

• 启用OnPush变更检测策略
  给当前组件添加changeDetection: ChangeDetectionStrategy.OnPush配置，只有当组件输入属性变更、内部事件触发、手动调用变更检测时才会运行变更检测，从根源上避免鼠标移动这类无关事件触发函数执行。
• 预计算列样式
  如果columns数组初始化后不会发生变化，可以直接在组件初始化阶段预计算每个列对应的class，绑定的函数直接返回预计算值，没有运行时逻辑开销：

ngOnInit() {
  this.columns.forEach(col => {
    const cellClass = col.prop === 'something' ? 'someClass' : 'someOtherClass';
    col.getCellClass = () => cellClass;
  });
}

• 函数结果缓存
  如果后续逻辑迭代需要依赖更多动态参数，可以给函数添加memoize缓存逻辑，相同入参直接返回缓存结果，避免重复执行计算。

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