Angular性能优化：不在模板调用comment函数实现表格评论展示

我已经实现了一个函数，能根据推入数组的结果数值生成评论并展示在表格里。但因为在模板中调用comment()函数会降低性能，想知道怎么在不调用HTML里的comment()函数的前提下实现相同效果。

项目逻辑：将计算结果存入localStorage，同时把新结果推入历史计算数组中。当前模板里调用函数的代码是：

<td>{{ comment(history.result, history.temperatureUnit === 'C') }}</td>

使用方式：点击输入框输入F切换为华氏度，输入C切换为摄氏度。

解决方案 #

方法1：预计算评论并存入历史记录（性能最优） #

每次往历史数组添加新记录时，直接生成评论字段并和结果、单位一起存储，模板直接读取预计算好的字段即可，避免重复计算。

修改组件中添加历史记录的代码：

// 示例：新增历史记录时预计算comment
const calculatedResult = /* 你的计算结果 */;
const currentUnit = /* 当前温度单位 */;

const newHistoryEntry = {
  result: calculatedResult,
  temperatureUnit: currentUnit,
  // 提前调用comment函数生成结果并存入
  comment: this.comment(calculatedResult, currentUnit === 'C')
};

// 推入数组
this.historyArray.push(newHistoryEntry);
// 更新localStorage时也保存comment字段
localStorage.setItem('history', JSON.stringify(this.historyArray));

模板中直接引用预计算的字段：

<td>{{ history.comment }}</td>

方法2：将评论逻辑封装为Angular管道 #

Angular管道会自动缓存计算结果，只有当输入参数变化时才会重新执行，比模板内直接调用函数更高效。

1. 创建管道：

ng generate pipe comment

2. 实现管道逻辑（把原comment函数的代码迁移过来）：

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

@Pipe({
  name: 'comment'
})
export class CommentPipe implements PipeTransform {
  transform(result: number, isCelsius: boolean): string {
    // 原comment函数的逻辑
    if (isCelsius) {
      if (result < 0) return '天太冷了，注意保暖！';
      if (result < 20) return '天气微凉，建议穿外套';
      return '温度适宜';
    } else {
      if (result < 32) return '天太冷了，注意保暖！';
      if (result < 68) return '天气微凉，建议穿外套';
      return '温度适宜';
    }
  }
}

3. 在模板中使用管道：

<td>{{ history.result | comment: (history.temperatureUnit === 'C') }}</td>

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