当我尝试在Ivy中探索管道实现的源代码时,我发现在Ivy中,如果一个纯管道在组件模板的多个地方使用,Angular将为同一个纯管道创建每个实例。
在View Engine中,纯管道实例在使用之间被缓存(ref https://indepth.dev/posts/1061/the-essential-difference-between-pure-and-impure-pipes-in-angular-and-why-that-matters)
所以,你能解释一下我在常春藤为什么我们不缓存纯管道实例实现在视图引擎?
我只是做了一个简单的比较,仅供参考,差异可以在控制台日志
中看到非常感谢!
https://stackblitz.com/edit/angular-ivy-pure-pipe?file=src/app/app.component.html和
https://stackblitz.com/edit/angular-view-engine-pure-pipe?file=src/app/app.component.html
让PURE管道成为多实例Angular允许注入父指令。
<div appCustomDir> <!-- appCustomDir is a user defined directive -->
<div>
{{result | custom: number1 : number2}} <!-- custom is a user defined pipe -->
</div>
</div>
现在我们可以注入这个"appCustomDir"在我们的" custom "中的管道构造函数中下面的管道-
import { CustomDirDirective } from './../customDirectives/custom-dir.directive';
import { Inject, Optional, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'custom',
pure: true
})
export class CustomPipe implements PipeTransform {
constructor(@Optional() @Inject(CustomDirDirective) private customDir) {}
transform(value: unknown, ...args: number[]): unknown {
if(this.customDir) {
this.customDir.changeborder();
}
this.customDir.changeborder();
return args.reduce((n, ac = 0) => ac + n);
}
}
在IVY引擎之前,angular使用了VIEW引擎,VIEW引擎只创建了一个PURE管道实例,并在多个用途中共享。但是IVY创建了多个PURE管道实例,所以我们可以注入父指令。
Try - make "enableIvy": false in tsconfig。如果你在Json中注入父指令,它会给你一个错误。