Angular：输入对象内部变化但引用未变时，能否触发纯管道？

你的理解是否正确？ #

完全正确。Angular的纯管道默认仅在输入值的引用发生变化时才会重新执行。当你修改对象内部的属性时，对象本身的引用并没有改变，所以纯管道不会感知到这种变化，自然不会触发重新计算。

实现对象内部变化触发管道的可行方式 #

1. 将纯管道改为不纯管道（pure: false） #

这是最简单的实现方式，只需在管道装饰器中设置pure: false，标记为不纯管道。不纯管道会在每次Angular执行变更检测时都重新运行，无论输入引用是否变化。

示例代码：

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

@Pipe({
  name: 'customObjectPipe',
  pure: false // 关键：设置为不纯管道
})
export class CustomObjectPipe implements PipeTransform {
  transform(inputObj: any): any {
    // 你的管道处理逻辑，比如格式化对象数据
    return Object.values(inputObj).join(', ');
  }
}

注意：不纯管道的性能开销更高，因为每次变更检测都会执行。如果你的管道逻辑比较复杂，或者页面有大量频繁的变更操作，可能会影响性能，仅推荐用于逻辑简单的场景。

2. 修改对象时返回新的引用 #

保持管道为纯管道，每次修改对象内部属性时，创建一个新的对象实例（改变引用），这样纯管道会因为输入引用变化而重新执行。

示例代码（组件中修改对象）：

// 修改单个属性时，用扩展运算符生成新对象
this.targetObject = { ...this.targetObject, name: '新名称' };

// 修改数组属性时，同样返回新数组
this.targetObject.items = [...this.targetObject.items, '新元素'];

优势：保留纯管道的性能优势，只有当引用真正变化时才触发管道执行，适合对性能要求较高的场景。需要注意的是，每次修改对象都要手动生成新引用，适合可控的修改场景。

3. 自定义变更检测逻辑 #

通过ChangeDetectorRef和ngDoCheck钩子，手动对比对象的内部变化，当检测到变化时标记视图需要重新检测，从而触发管道执行。

示例代码（组件中实现）：

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

// 自定义深对比函数（也可以使用lodash的isEqual等工具函数）
function deepEqual(obj1: any, obj2: any): boolean {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

@Component({
  selector: 'app-example',
  template: '{{ user | userInfoPipe }}'
})
export class ExampleComponent implements DoCheck {
  user = { name: '张三', age: 25 };
  private lastUserState: any;

  constructor(private cdr: ChangeDetectorRef) {
    this.lastUserState = { ...this.user };
  }

  ngDoCheck(): void {
    // 对比当前对象和上一次的状态
    if (!deepEqual(this.user, this.lastUserState)) {
      this.lastUserState = { ...this.user };
      this.cdr.markForCheck(); // 标记视图需要重新检测，触发管道执行
    }
  }
}

适用场景：对象结构复杂，且无法频繁生成新引用的场景。这种方式可以精确控制管道的触发时机，避免不必要的性能开销，但需要自己实现可靠的深对比逻辑。

内容的提问来源于stack exchange，提问作者L. Kvri