青灯夜游
如何利用管道提高应用程序的性能？本篇文章通过代码示例来给大家详细介绍一下利用管道提高Angular应用程序性能的方法。
我们通过一个例子来演示下：
Example
@Component({
selector: 'my-app',
template: `
<p *ngFor="let user of users">
{{ user.name }}有一只猫 {{ getCat(user.id).name }}
</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
users = [{ id: 1, name: 'wang' }, { id: 2, name: 'li' }];
cats = [{ name: 'Tom', userId: 1 }, { name: 'Jerry', userId: 2 }];
getCat(userId: number) {
console.log('User', userId);
return this.cats.find(c => c.userId === userId);
}
}
有两组数据分别是 users 与 cats，可以把 users 理解为传入数据，或者是其他数据源。通过 getCat() 方法获取对应的 猫咪，这种场景再业务开发中再熟悉不过。
最后添加全局模板直接进行一个循环输出。【相关教程推荐：《》】
接下来看下输出
User 1 User 2 User 1 User 2 User 1 User 2 User 1 User 2
可以 getCat() 方法调用了 8 次，有 6 次无用调用。这是因为当在模板内使用方法时，angular 每次变更检测都会调用其方法。
我们可以添加一个监听事件
@HostListener('click')
clicked() { }
每当点击事件触发，就会调用 4 次
User 1 User 2 User 1 User 2
这不是我想要，我只想让它调用两次啊！！！数据量大了这么玩顶不住。
Pure Pipe
接下来就是主角登场了。我们先创建一个 pipe
@Pipe({
name: 'cat',
})
export class CatPipe implements PipeTransform {
constructor(private appComponent: AppComponent) {}
transform(value, property: 'name' | 'userId'): unknown {
console.log('User', value);
const cat = this.appComponent.cats.find(c => c.userId === value);
if (cat) {
return cat[property];
}
}
}
可以看到 pipe 的实现与之前调用的方法基本是一样的，在模板中添加引用之后，却发现结果符合之前的预期了，只调用了两次。
这是因为 pipe 默认是 pure pipe，且 Pipe 装饰器有 pure 可用来设置管道模式。
@Pipe({
name: 'cat',
pure: true
})
而 pure 表示的是: transform 的值(入参value)发生变化时是否 不跟随变更检测调用。
当把 pure 改成 false，会随变更检测调用多次，不管值发生变化没。
了解变更检测机制：[译]深入理解Angular onPush变更检测策略
https://zhuanlan.zhihu.com/p/96486260
这样我们通过 pipe 代替模板中的方法，就减少了 angular 模板中不必要的调用。
总结
当模板中数据为静态数据需要转换或加工时，调用pipe比调用方法好。
更多编程相关知识，请访问：！！
以上就是如何利用管道提高Angular应用程序的性能？的详细内容，更多请关注php中文网其它相关文章！
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)