我有一个翻译管道,它接受一个字符串作为键,并从字典中返回翻译后的字符串。管道看起来像这样:
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个字符的密码,则每次按键和键入时都会开始更改跟踪,并且对于页面上所有不同的翻译文本,管道会被执行几次。
主要问题是:这是一件坏事吗,它对整体表现有多大的负面影响?
或者是否有另一种方法可以强制角度按要求重新评估所有内容,例如只有在语言发生变化时?
答案 0 :(得分:6)
不纯的管道对性能有很大影响,特别是当它们执行复制,过滤和排序数组等非平凡工作时。
每个变化检测周期都会调用不纯的管道,无论如何。如果可能的话,缓存结果是明智的,以避免在可能的情况下反复做同样的工作。
只有在输入值或参数发生变化时才会调用纯管道。
如果可能,您可以保持管道纯净,而是添加一个额外的参数。更新该参数会导致管道再次运行。
答案 1 :(得分:0)
不建议使用不纯净的管道。我会影响你的表现。 即使源未更改,也将称为它。
要看到这个。
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>