Angular 2（纯=假）中的不纯管道对我的性能有害吗？答案

【问题标题】：Are impure pipes in Angular 2 (pure = false) bad for my performance?Angular 2（纯=假）中的不纯管道对我的性能有害吗？
【发布时间】：2016-07-20 02:26:03
【问题描述】：

我有一个翻译管道，它接受一个字符串作为键，并从字典中返回翻译后的字符串。管道如下所示：

import {Pipe, PipeTransform} from 'angular2/core';
import {TranslateService} from './translate.service';

@Pipe({
    name: 'translate',
    pure: false
})
export class TranslatePipe implements PipeTransform {

    constructor(private _translateService : TranslateService) {
    }
    transform(key: string): any {
        var translatedText = this._translateService.resources[key];
        if (translatedText)
            return translatedText;
        return key;
    }
}

我在模板中这样使用管道：

<div>{{'login_EnterNewPassword'|translate}}</div>

这将在我的 HTML 中呈现如下：

<div>Please enter a new password</div>

到目前为止一切顺利！

TranslatePipe 依赖于 TranslateService，它包含一个名为资源的字典，其中包含当前语言的翻译。 TranslateService 的资源通过对服务器的 ajax http 调用加载，如果用户选择不同的语言，它可以在后台重新加载。

因为发生这种情况时我需要我的 UI 来更新所有文本，所以我将管道的 pure 属性设置为 false。

一切都很完美，但问题是，管道经常被执行，因为它不纯。如果用户输入 10 个字符的密码，则每次按下和按下时都会开始更改跟踪，并且管道会针对页面上所有不同的翻译文本执行数百次。

主要问题是：这是一件坏事，对整体性能有很大的负面影响吗？？？

或者是否有另一种方法可以强制 Angular 按需重新评估所有内容，例如仅在语言更改时？？

【问题讨论】：

标签： angular typescript angular2-directives

【解决方案1】：

不纯管道对性能有相当大的影响，尤其是当它们执行复制、过滤和排序数组等重要工作时。

无论如何，在每个变更检测周期都会调用不纯管道。明智的做法是尽可能缓存结果，以避免尽可能重复执行相同的工作。

纯管道仅在输入值或参数发生更改时才被调用。

如果可能，您可以保持管道纯净，而是添加一个附加参数。更新该参数会导致管道再次运行。

【讨论】：

“如果可能的话，你可以保持管道纯净，而是添加一个额外的参数” 是否可以对管道类属性而不是管道参数做同样的事情？（如果管道属性发生变化，则与参数消失一样）我的管道使用返回当前语言的翻译服务，我不想将此服务添加到每个组件，只是为了能够将语言作为管道参数。
@GregorSrdic 我明白，但我不知道其他选项。
@GünterZöchbauer 您可以使用 i18n alt。
@FindOutIslamNow 对。当我发布这个答案时，那还没有：D

【解决方案2】：

不建议使用不纯的管道。我会影响你的表现。即使源没有改变也会被调用。

看到这个。

  name: 'empFilter',
  pure: false
})
export class EmpFilterPipe implements PipeTransform {
  private count = 0;
  transform(employees: Employee[], searchValue?: string): Employee[] {
    console.log(this.count++);
   }
}

onMouseOver(): void{

}

<div *ngFor="let emp of employees | empFilter : searchValue" 
     (mouseover)="onMouseOver()">
        {{emp.name}}
</div>

【讨论】：