如何避免在Angular模板表达式中用函数调用实现样式判断

首先明确：你直接在模板中写入listYears.find(x => x === year)的做法，和使用函数调用存在相同的性能问题——Angular每次变更检测都会执行这个查找操作，当列表数据量大时，会重复消耗计算资源，所以这个想法是错误的。

以下是两种符合性能要求的替代实现方式：

方案1：组件内维护状态（推荐） #

在组件中定义一个布尔属性，仅当依赖的listYears或year发生变化时，才执行一次存在性检查，模板直接绑定该属性即可。

子组件TS代码 #

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

export class ChildComponent implements OnInit, OnChanges {
  @Input() listYears: Array<number> = [];
  year = 2022;
  isCurrentYearInList = false;

  ngOnInit(): void {
    this.checkYearExists();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 仅当依赖数据变化时重新检查
    if (changes['listYears'] || changes['year']) {
      this.checkYearExists();
    }
  }

  private checkYearExists(): void {
    // 用includes替代find，更贴合"判断存在性"的需求
    this.isCurrentYearInList = this.listYears.includes(this.year);
  }
}

子组件HTML代码 #

<div [style.background-color]="isCurrentYearInList ? 'red' : 'blue'"></div>

这种方式的优势是：只有当listYears或year的实际值发生变化时，才会执行一次查找逻辑，模板仅读取预计算好的属性，彻底避免了变更检测时的重复计算。

方案2：使用纯管道 #

创建一个纯管道封装存在性判断逻辑，利用Angular纯管道的缓存机制，仅当输入参数的引用发生变化时才重新计算。

管道代码 #

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

@Pipe({
  name: 'existsInArray'
})
export class ExistsInArrayPipe implements PipeTransform {
  transform(targetValue: number, array: number[]): boolean {
    return array.includes(targetValue);
  }
}

注：需要在对应模块的declarations数组中声明该管道。

子组件HTML代码 #

<div [style.background-color]="year | existsInArray: listYears ? 'red' : 'blue'"></div>

纯管道的特点是：仅当year或listYears的引用发生变化时，才会重新执行判断逻辑。如果父组件传递的数组是同一个引用（仅修改数组内容），纯管道不会触发重新计算，此时需要结合实际场景评估是否适用。

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