首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Angular 2 (pure = false)中的不纯管道对我的性能不好吗?

Angular 2 (pure = false)中的不纯管道对我的性能不好吗?
EN

Stack Overflow用户
提问于 2016-03-31 22:45:07
回答 2查看 4.5K关注 0票数 14

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

代码语言:javascript
代码运行次数:0
运行
复制
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;
    }
}

我在模板中使用管道,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<div>{{'login_EnterNewPassword'|translate}}</div>

它将在我的HTML中呈现如下:

代码语言:javascript
代码运行次数:0
运行
复制
<div>Please enter a new password</div>

到目前一切尚好!

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

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

每件事都很完美,但问题是,管道经常被执行,因为它是不纯的。如果用户输入10个字符的密码,更改跟踪将在每次按下和按下键盘时启动,并且对页面上所有不同的翻译文本执行管道上千次。

主要问题是:这是一件坏事吗?它对整体性能有多大的负面影响?

或者,是否有其他方法可以强制angular按需重新评估所有内容,例如仅当语言发生变化时?

EN

回答 2

Stack Overflow用户

发布于 2016-06-12 18:03:37

不纯净的管道对性能有相当大的影响,特别是当它们执行诸如复制、过滤和排序数组之类的重要工作时。

不纯管道在每个变化检测周期都会被调用,不管是什么。明智的做法是尽可能缓存结果,以避免在可能的情况下一遍又一遍地做相同的工作。

只有当输入值或参数发生更改时,才会调用纯管道。

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

票数 8
EN

Stack Overflow用户

发布于 2019-02-10 18:20:26

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

来看看这个。

代码语言:javascript
代码运行次数: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{

}
代码语言:javascript
代码运行次数:0
运行
复制
<div *ngFor="let emp of employees | empFilter : searchValue" 
     (mouseover)="onMouseOver()">
        {{emp.name}}
</div> 
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36336697

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档