2016-03-31 8 views
12

Ho una pipe translate, che accetta una stringa come chiave e restituisce la stringa tradotta da un dizionario. Il tubo si presenta così:Le pipe impure in Angular 2 (pure = false) non sono buone per la mia performance?

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; 
    } 
} 

Io uso il tubo nei miei modelli come questo:

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

Quale sarà reso nel mio HTML in questo modo:

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

Fin qui tutto bene!

TranslatePipe dipende dal TranslateService, che contiene un dizionario chiamato risorse con traduzioni della lingua corrente. La risorsa TranslateService viene caricata con una chiamata http ajax su un server e può essere ricaricata dietro le quinte, se un utente seleziona una lingua diversa.

Perché ho bisogno della mia interfaccia utente per aggiornare tutti i testi quando ciò accade, ho impostato la proprietà pura della pipe su false.

Tutto funziona perfettamente, ma il fatto è che la pipa viene eseguita molto spesso, poiché è impura. Se l'utente inserisce una password di 10 caratteri, il cambio di tracciamento inizia su ogni key-down e key-up, e la pipe viene eseguita in hundres di volte per tutti i diversi testi tradotti nella pagina.

La domanda principale è: è una cosa negativa e ha un impatto molto negativo sulle prestazioni complessive ???

Oppure esiste un altro modo per forzare l'angolare per rivalutare tutto su richiesta, ad esempio solo quando la lingua cambia ???

risposta

5

I tubi impuri hanno un notevole impatto sulle prestazioni, soprattutto quando eseguono operazioni non banali come la copia, il filtraggio e l'ordinamento di array.

I tubi impuri vengono richiamati in ogni ciclo di rilevamento delle modifiche, indipendentemente dal fatto. È consigliabile memorizzare i risultati, se possibile, per evitare di ripetere sempre lo stesso lavoro, se possibile.

Le pipe pure vengono richiamate solo quando il valore di ingresso o i parametri sono cambiati.

Se possibile, è possibile mantenere puro il tubo e aggiungere un parametro aggiuntivo. L'aggiornamento di quel parametro fa sì che la pipa venga nuovamente eseguita.

+0

"Se possibile, è possibile mantenere puro il pipe e aggiungere un ulteriore parametro" È possibile fare lo stesso con la proprietà della classe pipe non con il parametro pipe? (se la proprietà pipe cambia, fare lo stesso come se il parametro dovesse morire) La mia pipe utilizza un servizio di traduzione che restituisce la lingua corrente e non vorrei aggiungere questo servizio a ogni componente, solo per poter passare la lingua come un parametro per la pipe. –

+1

@GregorSrdic Lo capisco ma non conosco altre opzioni. –