近日，不少Angular开发者在社区反映：在最新版本的Angular应用中，自定义管道（Pipe）似乎对Observable或Signal的数据变化“无动于衷”，无法像预期那样自动更新视图。这一现象引发了广泛讨论，尤其是在Angular 17+引入Signal并全面拥抱响应式编程后，传统的管道行为与新的响应式机制之间存在微妙的兼容性差异。本文将深入剖析问题根源，并给出务实的解决方案。

问题现象：管道不再是“自动刷新”的魔术师

在Angular中，管道（Pipe）是一种用于模板中转换数据的工具。通常，开发者会使用async管道订阅Observable，或使用date、currency等内置管道格式化数据。然而，近期有开发者反馈：当数据源是一个BehaviorSubject或一个Signal时，自定义管道并不会在数据变化后重新执行。

典型场景如下：

// Component
count$ = new BehaviorSubject(0);

// Template
{{ count$ | myCustomPipe }}

当count$.next(1)触发后，myCustomPipe并不会自动重新计算，除非手动触发变更检测。类似地，使用Signal作为输入时，管道同样“失灵”。

原因分析：纯管道与变更检测的“代沟”

要理解这一现象，需要回顾Angular的核心设计：纯管道（Pure Pipe）。

默认情况下，Angular中的管道是“纯”的——即只有在其输入引用发生改变时，管道才会重新执行。对于原始类型（string、number、boolean），Angular通过值比较判断是否改变；但对于对象或数组，Angular只做引用检查，不做深比较。

问题出在：当管道接收的参数是一个Observable或Signal对象本身（而非其emit的值）时，该对象的引用从未改变，因此纯管道不会再次执行。例如：

{{ myObservable$ | myPipe }}

这里的myObservable$是一个Observable实例，其引用在组件生命周期内是稳定的。async管道之所以能工作，是因为它内部订阅了Observable，并在每次值变化时强制触发变更检测。而自定义管道并没有这种“订阅能力”。

对于Signal，情况类似：Signal对象本身引用不变，其内部值变化不会触发纯管道的重新求值。

Signal的加入：更“新鲜”的响应式范式

Angular 17+引入的Signal带来了更细粒度的响应式更新。当模板中使用{{ mySignal() }}时，Angular会自动追踪Signal的依赖，并在其变化时仅更新相关部分。但管道是一个独立的转换层，它不会自动“感知”Signal内部的读操作。例如：

{{ mySignal() | myPipe }}

由于mySignal()在模板中每次被调用都会返回当前值（对象或原始类型），此时管道输入是Signal的当前值（比如一个数字），而不是Signal本身。如果该值引用不变（如原始类型或同一个对象），纯管道同样不会重新执行。

解决方案：针对性破局

针对不同场景，开发者可以采取以下策略：

1. 使用async管道 + map结合

如果管道只是对Observable发射值进行转换，最直接的方式是先通过async管道订阅，再将得到的值传入管道：

{{ (count$ | async) | myCustomPipe }}

这样管道接收的是具体值，而非Observable对象。但注意：async管道会将Observable转为值，若值本身引用不变（如原始类型），需依赖Angular的变更检测。

2. 将管道设为非纯（Impure）

在管道装饰器中设置pure: false，管道会在每次变更检测循环（哪怕没有输入变化）时重新执行：

@Pipe({ name: 'myCustomPipe', pure: false })

缺点是性能开销大，适用于频繁变化但数据量小的场景。

3. 使用Signal的computed函数

对于Signal场景，Angular更推荐用computed替代管道：

export class MyComponent {
  count = signal(0);
  transformedCount = computed(() => this.transform(this.count()));
  private transform(value: number): string {
    // 管道逻辑
  }
}

在模板中直接使用{{ transformedCount() }}，性能最优且无管道响应问题。

4. 手动触发变更检测

对于Observable，可以在订阅时调用ChangeDetectorRef.detectChanges()，但这不是最佳实践，应优先考虑非纯管道或async管道。

专家观点：拥抱Signal，谨慎使用管道

Angular核心团队成员在最近的一次访谈中提到：在Signal成为第一响应式原语的背景下，传统管道（尤其是纯管道）的设计与Signal的自动跟踪机制存在天然冲突。他们建议开发者在新项目中优先使用Signal的computed和effect，而非将管道作为“转换器”。对于存量Observable代码，应确保管道输入是具体值，而非Observable对象。

结语：变更检测的“最后一公里”

Angular管道“不响应”问题，本质上是传统变更检测策略与新型响应式原语的磨合阵痛。理解纯管道的引用检查机制，并根据数据源类型选择合适的方案，是避免踩坑的关键。随着Angular对Signal的支持日益完善，未来管道或将迎来重构，但当下，开发者仍需在“纯”与“非纯”之间做出权衡。