如何避免在角度 2 中多次执行不纯管道？答案

【问题标题】：how to avoid multiple executions of a impure pipe in angular 2?如何避免在角度 2 中多次执行不纯管道？
【发布时间】：2017-12-30 19:59:51
【问题描述】：

您好，我正在使用 Angular 2 管道返回对象的键，它是一个不纯的管道，并且它被多次执行，这阻塞了其他一些脚本，我怎样才能避免多次执行不纯的管道？我的代码如下：

 import {Pipe,PipeTransform} from '@angular/core';
    @Pipe({ name: 'NgforObjPipe', pure: true })
    export class NgforObjPipe implements PipeTransform {
        transform(value, args:string[]):any {
        let keys = [];
        for (let key in value) {
            keys.push({key: key, value: value[key]});
        }
        console.log('pipeeeeeeeeeeeeeee', keys);
        return keys;
        }
    }

【问题讨论】：

这个管道在什么意义上是不纯的？既然你指定pure: true，为什么你认为这是一个问题？

标签： javascript angular typescript

【解决方案1】：

没有办法阻止这种情况。这就是不纯管道的用途。

您可以做的是，确保在 transform() 方法内完成的工作尽可能少，例如通过缓存结果并仅在传递的值实际发生更改时重新计算。

您还可以使用Object.keys() 来获得更高效的代码。另见How to iterate [object object] using *ngFor in Angular 2

ChangeDetectionStrategy.OnPush 可用于减少运行更改检测的次数，以尽量减少对管道的调用次数。

【讨论】：

OnPush 策略不能在这种情况下提供帮助吗？
正要添加到我的答案中。是的，我认为它可以提供帮助。
谢谢伙计，但是在组件内手动转换对象更有意义+1
在组件内部更容易知道值何时更改（例如取决于事件），因此更容易将代码执行次数减少到所需的最小值。所以是的。我同意你的结论。
感谢@GünterZöchbauer，您的回答帮助我修复了它..:)

【解决方案2】：

有两种方法可以做到这一点。

您可以考虑将此 Object 值作为 Input 传递给组件，并使您的组件 ChangeDetectionStrategy onPush。
通过像NgforObjPipe.tranform() 一样手动调用其转换方法，将您的NgforObjPipe 管道应用到组件本身的collection。

【讨论】：

感谢@Pankaj Parkar，您的回答帮助我修复了它..:)