web-dev-qa-db-fra.com

Qu'est-ce qu'un tuyau impur dans Angular?

@Pipe({name:'myPipe', pure: false})

Je suis incapable de comprendre des tuyaux impurs, certains quoi de mieux avec des tuyaux purs.

S'il vous plaît expliquez-moi avec un exemple simple et basique?

angularangular-pipe
26
Mr_Perfect

Un tuyau pur n’est appelé que lorsque Angular détecte une modification de la valeur ou des paramètres transmis à un tuyau. Un tuyau impur est appelé pour chaque cycle de détection de changement, que la valeur ou les paramètres changent.

Ceci est pertinent pour les changements qui ne sont pas détectés par Angular.

  • lorsque vous passez un tableau ou un objet dont le contenu a été modifié (mais reste la même instance)
  • lorsque le canal injecte un service pour accéder à d'autres valeurs, Angular ne reconnaît pas si elles ont changé.

Dans ces cas, vous souhaiterez probablement toujours que le tuyau soit exécuté.

Vous devez savoir que les tuyaux impurs ont tendance à être inefficaces . Par exemple, lorsqu'un tableau est passé dans le tuyau pour filtrer, trier, ... alors ce travail peut être effectué chaque fois que la détection de changement est exécutée en particulier avec le paramètre par défaut ChangeDetectionStrategy) bien que le tableau puisse même ne pas avoir changé… .. Votre canal doit essayer de le reconnaître et, par exemple, renvoyer les résultats mis en cache.

34
Günter Zöchbauer

Outre la réponse précédente, je souhaite ajouter une autre différence: le nombre d'instances.

Supposons qu'un tube est utilisé plusieurs fois dans un code HTML. Comme:

<p> {{'Hello' | translate }}<p>
<p> {{'World' | translate }}<p>
  • Si pipe est pur: il n'y aura qu'une seule instance de pipe. La méthode de transformation sera appelée deux fois mais sur la même instance.
  • Si le tuyau est impur: il y aura deux occurrences du tuyau. 

(vous pouvez le voir en générant un identifiant aléatoire dans le constructeur du tube et en l’imprimant à la fois dans les méthodes constructor et transform)

Comme les pipes pures (ou les fonctions généralement pures) n’ont (devrait) avoir AUCUN effet secondaire, le même code pur peut être réutilisé à volonté nombre de fois. Semble que c’est la raison pour laquelle les tuyaux purs ne sont instanciés qu’une fois.

OBS: ceci est valable dans mon environnement 4.0 angulaire. 

21
Dacian

Dans angular, une pipe peut être utilisée comme pure et impure

Qu'est-ce qu'un tuyau pur ou impur?

En des mots simples,
impure-pipe fonctionne pour chaque changement dans le tableau et 
pure-pipe fonctionne uniquement la component est chargée.

Comment faire une pipe pure ou impure?

@Pipe({
  name: 'sort',
  pure: true | false // true makes it pure and false makes it impure
})
export class myPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    // your logic here and return the result
  }

}

Comment l'utiliser?

<div> {{ arrayOfElements | sort }}<div>

Cliquez pour la démo pour démontrer la différence

en lire plus à https://angular.io/guide/pipes

1
WasiF

Pipes pures et impures

  • les pipes purs sont les pipes qui ne sont exécutées que lorsqu'un "PURE CHANGE" à la valeur d'entrée est détectée.

    • Un changement pur est soit un changement d'une valeur d'entrée primitive (chaîne, nombre Etc.). ou changé de référence d'objet.

  • par défaut, un tuyau est un tuyau pur.

  • Ainsi, un tuyau impur est exécuté à chaque fois, que sa source change ou non. ce qui conduit à de mauvaises performances .. C'est pourquoi il n'est pas recommandé d'utiliser des pipes pour filtrer les données.

Faire une pipe impure: 

  name: 'empFilter',
  pure: false  // default is set to true.
})
export class EmpFilterPipe implements PipeTransform {

  transform(employees: Employee[], searchValue?: string): Employee[] {

   }
}

<input type="text" [(ngModel)]="searchValue">
<button (click)="changeData()"></button>

changeData(): void{
    this.employees[0].name = "SOMETHING ELSE";
}

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

NOTE : if pipe is pure and  employees data is changed using method "changeData()" - It will not detect the changes .
     Since input value to the  EmpFilterPipe is Object & reference of "employees"  has not been changed.
0
Ritu Gupta