Angular 14.2.6中Pure Pipe未在组件级缓存的原因咨询

核心原因：Ivy编译器的实例化策略变化 #

你遇到的现象是因为Angular从版本9开始默认启用的Ivy编译器，彻底改变了管道的实例化逻辑：

• 在旧版View Engine编译器中，纯管道确实会在组件级别复用实例，同一组件内多次调用共享同一个管道实例；
• 但Ivy为了优化编译效率和运行时性能，调整了规则：无论管道是纯（pure: true）还是不纯（pure: false），模板中每一次管道调用都会创建独立的管道实例。

纯管道的“缓存”到底指什么？ #

注意：纯管道的核心特性——transform方法的结果缓存依然生效，只是不再复用实例本身：

• 当你给纯管道传入相同的输入值和参数时，Angular会直接返回缓存的transform结果，不会重新执行transform方法；
• 但实例是每次调用都新建的，所以你会看到构造函数日志输出多次。

验证方法 #

修改你的纯管道代码，给transform方法添加日志：

transform(value: unknown, ...args: unknown[]): unknown {
    console.log('Pure Pipe transform executed');
    return value;
}

运行后会发现：虽然构造函数日志输出2次，但transform方法只会执行1次（因为输入值相同，结果被缓存），这才是纯管道的核心优化点。

如何复用管道实例（可选） #

如果确实需要在组件内复用同一个管道实例，可以把管道注册为全局服务：

@Pipe({ name: 'pure' })
@Injectable({ providedIn: 'root' })
export class PurePipe implements PipeTransform {
    // ... 原有代码
}

然后在组件中注入该管道，手动调用transform方法：

@Component({
    template: `
        <div>{{ purePipe.transform('Pure Pipe') }}</div>
        <div>{{ purePipe.transform('Pure Pipe') }}</div>
    `
})
export class YourComponent {
    constructor(public purePipe: PurePipe) {}
}

这种方式下，整个组件只会使用一个管道实例。

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