Question

我有一个翻译管道，它接受一个字符串作为键，并从字典中返回翻译后的字符串。管道看起来像这样：

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，它包含一个名为resources的字典，其中包含当前语言的翻译。 TranslateService的资源加载了对服务器的ajax http调用，如果用户选择其他语言，它可以在后台重新加载。

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

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

主要问题是：这是一件坏事吗，它对整体表现有多大的负面影响？

或者是否有另一种方法可以强制角度按要求重新评估所有内容，例如只有在语言发生变化时？

Answer 1

不纯的管道对性能有很大影响，特别是当它们执行复制，过滤和排序数组等非平凡工作时。

每个变化检测周期都会调用不纯的管道，无论如何。如果可能的话，缓存结果是明智的，以避免在可能的情况下反复做同样的工作。

只有在输入值或参数发生变化时才会调用纯管道。

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

Answer 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>

Angular 2中的不纯管道（纯=假）对我的表现有害吗？

2 个答案: