Angular纯管道如何从内部强制触发transform方法重新调用

Angular 纯管道默认仅在传入的源值、扩展参数发生原始值变更、引用类型指针变更时，才会重新执行transform方法更新渲染结果，其余变更检测周期会直接返回缓存值。不需要修改模板调用方式、不需要将管道设置为非纯管道，通过以下全版本兼容方案即可实现内部主动触发更新：

• 实现逻辑核心：
  利用Angular模板渲染、表达式计算时自动对返回值做toString/valueOf转换的特性，返回一个固定引用的包装对象，所有实际计算逻辑放到包装对象的类型转换方法中执行，既保留纯管道的缓存性能优势，又能在外部依赖变更时主动触发视图更新拿到最新结果。

• 具体实现步骤：

  1. 管道构造函数注入使用上下文的ChangeDetectorRef，用于标记视图待更新
  2. 类内部维护私有变量，缓存最新的transform入参、更新版本号，同时创建一个固定引用的包装对象，重写对象的toString、valueOf方法，内部基于最新入参、最新外部依赖值返回计算结果
  3. transform方法仅做入参缓存，始终返回同一个包装对象实例，保证纯管道不会因为返回值变更产生额外重算
  4. 在感知到外部依赖变更的回调中，更新版本号，调用ChangeDetectorRef.markForCheck()标记宿主视图为脏，等待下一轮变更检测即可，视图渲染时会自动调用包装对象的转换方法拿到最新值

• 对应示例改造代码：

import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { MyService } from './my.service';

@Pipe({ name: 'myPipe' })
export class MyPipe implements PipeTransform  {
  private latestInput: any;
  private latestArgs: any[] = [];
  private renderVersion = 0;
  // 固定引用的包装对象，避免触发纯管道重算
  private readonly renderWrapper = {
    toString: () => this.getLatestResult(),
    valueOf: () => this.getLatestResult()
  };

  constructor(
    private myService: MyService,
    private cdr: ChangeDetectorRef
  ) {
    // 感知外部依赖变更
    this.myService.onSomeVariableChange.subscribe(() => {
      this.renderVersion++;
      this.cdr.markForCheck();
    });
  }

  private getLatestResult() {
    // 实际转换逻辑放这里，所有依赖都是最新值
    return `${this.latestInput} ${this.myService.someVariable}`;
  }

  transform(value: any, ...args: any[]) {
    // 仅缓存最新入参，不修改返回的包装对象引用
    this.latestInput = value;
    this.latestArgs = args;
    return this.renderWrapper;
  }
}

性能说明：该方案下transform方法仅在管道入参实际变更时才会被Angular调用，和原生纯管道性能表现完全一致，不会出现非纯管道每次变更检测都执行转换逻辑的性能损耗。

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