Angular 6表达式调用函数触发ExpressionChangedAfterItHasBeenCheckedError求助

这个问题我之前在开发Angular项目时也碰到过，本质是Angular的开发模式变更检测机制在起作用，咱们一步步来拆解解决：

错误原因 #

Angular在开发模式下会执行两次变更检测：第一次完成后，你通过悬停事件修改了carName属性，而模板里的getCarName()方法会在第二次检测时返回新值，导致两次检测的结果不一致，Angular就会抛出这个错误来提醒你可能存在的变更检测问题。另外，模板中直接调用方法还有个弊端——每次变更检测都会执行这个方法，性能上不如直接绑定属性高效。

解决方案 #

方案1：直接绑定属性（最优解） #

既然getCarName()只是返回this.carName，完全可以把模板里的代码改成直接绑定属性：

<div>Car Name: {{ carName }} </div>

这样既避免了方法重复执行的性能损耗，也从根源上解决了变更检测的不一致问题，是最推荐的做法。

方案2：手动触发变更检测（适合必须用方法的场景） #

如果你的getCarName()后面会加复杂逻辑，必须保留方法调用，那可以在修改carName后手动通知Angular执行变更检测：

1. 先注入ChangeDetectorRef：

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

@Component({
  selector: 'app-car',
  templateUrl: './car.component.html'
})
export class CarComponent {
  carName: string = '初始车名';

  constructor(private cdr: ChangeDetectorRef) {}

  // 假设这是你的悬停事件处理方法
  onDivHover() {
    this.carName = '修改后的车名';
    // 手动触发变更检测，同步最新值
    this.cdr.detectChanges();
  }

  getCarName() {
    return this.carName;
  }
}

方案3：使用纯管道（适合复杂逻辑场景） #

如果方法里有复杂的计算逻辑，还可以把方法转换成纯管道，纯管道只有在输入值变化时才会重新计算，性能更优：

1. 创建管道文件car-name.pipe.ts：

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

@Pipe({
  name: 'carName'
})
export class CarNamePipe implements PipeTransform {
  transform(carName: string): string {
    // 这里可以添加你的复杂逻辑
    return carName;
  }
}

2. 在模块中声明这个管道，然后在模板中使用：

<div>Car Name: {{ carName | carName }} </div>

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