Angular纯管道能否自行刷新其返回值？

我希望我的纯管道具备内部订阅功能，能够定期刷新返回值。但据我了解，只有父组件能在输入变化时调用管道的transform方法，因此纯管道无法自行刷新。

@Pipe({ name: 'purePipe', pure: true})
export class Pure {
  value = 0;

  constructor(service: Service, cd: ChangeDetectorRef) {
    service.subject.subscribe((val) => {
      this.value = val; // 我希望刷新返回值
      cd.detectChanges();
    });
  }

  transform(input: number) {
    return this.value; // 因为返回的是值而非引用，无法刷新
                       // 只有输入变化时才会调用transform，内部无法触发
  }
}

结论：纯管道确实无法自行刷新返回值 #

Angular对纯管道的优化逻辑是：只有当管道的输入参数发生值或引用变化时，才会触发transform方法执行。你在管道内部通过订阅更新this.value的操作，并不会触发Angular重新调用transform——因为输入参数input没有变化，Angular会认为管道的输出结果不会改变，不会进行检查或更新。

另外，ChangeDetectorRef.detectChanges()在这里无效，因为管道本身没有关联的视图，它的输出更新完全依赖输入参数的变更触发。

可行解决方案 #

1. 改用不纯管道（pure: false）

不纯管道会在每个变更检测周期都被调用，这样内部订阅的更新就能同步到返回值中。但要注意：频繁的变更检测可能带来性能损耗，建议控制订阅的更新频率。

@Pipe({ name: 'impurePipe', pure: false})
export class Impure {
  value = 0;

  constructor(service: Service) {
    service.subject.subscribe((val) => {
      this.value = val;
    });
  }

  transform(input: number) {
    return this.value;
  }
}

2. 将订阅逻辑移到组件中（推荐）

这种方式更符合纯管道的设计理念，性能更优：在组件中订阅数据更新，把需要传递给管道的值作为组件属性，当属性变化时，纯管道会自动触发transform刷新结果。

组件代码：

export class MyComponent {
  pipeInputValue = 0;

  constructor(service: Service) {
    service.subject.subscribe(val => {
      this.pipeInputValue = val;
    });
  }
}

模板使用：

{{ pipeInputValue | purePipe }}

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