Quelle est la différence entre les tuyaux purs et impurs, et comment pouvons-nous les utiliser dans Angular ?
Angular nous fournit un moyen organisé de créer des applications Web frontales. Une entité qu’il a est des tuyaux.
Les tuyaux nous permettent de restituer les éléments dans les modèles de composants comme nous le souhaitons. Il existe deux types de tuyaux dans Angular. Dans cet article, nous examinerons les deux types de tuyaux – purs et impurs – et ce qu’ils font.
Tuyaux purs et impurs
Un tube pur est un tube exécuté lorsqu’un changement pur est détecté. Un changement pur est un changement d’une valeur d’entrée JavaScript primitive comme des chaînes, des nombres, des booléens, des symboles ou un changement de référence d’objet.
Les tuyaux purs doivent être des fonctions pures. Les fonctions pures prennent une entrée et renvoient une sortie. Ils n’ont pas d’effets secondaires.
Les modifications au sein des objets sont ignorées avec les canaux purs. Lorsque l’un de ces changements aura lieu, le tube s’exécutera et le dernier changement sera rendu.
Les canaux impurs sont des canaux qui peuvent détecter des changements dans les objets. Les modifications au sein des objets incluent des éléments tels que la modification des entrées de tableau ou des propriétés de l’objet.
Définir un tuyau
Pour ajouter un tuyau dans notre projet, nous pouvons utiliser le ng g pipe commande.
Par exemple, nous écrivons :
ng g pipe localedate
à la racine de notre dossier de projet pour créer le localedate tuyau. Il enregistrera le tube dans le module et générera automatiquement les fichiers du tube.
Ensuite, nous pouvons aller à localedate.pipe.ts et ajouter:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "localedate",
})
export class LocaledatePipe implements PipeTransform {
transform(value: Date, ...args: unknown[]): string {
return value.toLocaleDateString();
}
}
pour modifier le transform méthode de la LocaledatePipe classer.
Tous les tuyaux implémentent le PipeTransform interface, qui spécifie que la classe de canal doit avoir le transform méthode. Dans celui-ci, nous obtenons le value paramètre, puis nous renvoyons une nouvelle valeur dérivée de celui-ci.
Dans cet exemple, nous renvoyons la chaîne de date localisée en appelant value.toLocaleDateString.
value peut être n’importe quel type de valeur. Nous utilisons le name valeur pour référencer le tuyau dans notre modèle. Ensuite on peut l’utiliser dans un composant en écrivant :
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
date = new Date(2022, 1, 1);
}
Nous précisons le date variable que nous voulons formater en une chaîne de date localisée. Et nous le ferons avec le localedate tuyau que nous avons créé. Ensuite, nous l’utilisons dans notre modèle avec :
app.component.html
<div>{{ date | localedate }}</div>
Nous plaçons le nom du canal après la variable que nous voulons formater dans notre modèle de composant. En conséquence, nous devrions voir quelque chose comme 2/1/2022 affiché à l’écran en fonction de la région dans laquelle nous nous trouvons.
Comme nous n’avons pas défini le type du tuyau, il s’agit d’un tuyau pur puisque les tuyaux sont purs par défaut.
Les tuyaux peuvent prendre des arguments. Et nous pouvons les obtenir de la args paramètre dans le transform méthode. Par exemple, nous écrivons :
datelocale.pipe.ts
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "localedate",
})
export class LocaledatePipe implements PipeTransform {
transform(value: Date, ...args: string[]): string {
const [locale = "en"] = args;
return value.toLocaleDateString(locale);
}
}
pour faire le args paramètre rest un tableau de chaînes dans le transform méthode. Dans celui-ci, nous obtenons le premier argument de la args tableau avec déstructuration.
Nous fixons locale à « en” par défaut. Et nous appelons toLocaleDateString avec lui pour renvoyer une chaîne de date dans les paramètres régionaux que nous voulons.
Ensuite, nous mettons à jour app.component.html avoir:
<div>{{ date | localedate: "fr" }}</div>
pour afficher la date dans les paramètres régionaux français. Alors il faudrait voir 01/02/2022 affiché.
Tuyaux impurs
Nous pouvons créer des canaux impurs pour restituer les modèles lorsque le contenu d’un objet, comme les propriétés de l’objet ou les entrées du tableau, change.
Par exemple, nous pouvons créer le sorted tuyau en exécutant :
ng g pipe sorted
Puis dans sorted.pipe.tsnous écrivons:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "sorted",
pure: false,
})
export class SortedPipe implements PipeTransform {
transform(numbers: number[], ...args: unknown[]): number[] {
return numbers.sort((a, b) => a - b);
}
}
ajouter un code pour appeler numbers.sort pour trier les nombres par ordre croissant dans le transform méthode. Un nouveau tableau avec les nombres triés est renvoyé.
Nous fixons pure à false afin que nous puissions l’utiliser pour restituer le trié numbers tableau lorsque nous le modifions.
Puis dans app.component.tsnous écrivons:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
numbers = [Math.random(), Math.random(), Math.random()];
generateNumber() {
this.numbers.push(Math.random());
}
}
Nous ajoutons le numbers tableau dans le composant et définissez-le sur un tableau avec des nombres aléatoires.
Puis nous ajoutons le generateNumber méthode qui ajoute un nouveau nombre aléatoire dans le numbers tableau avec push.
Ensuite, en app.component.htmlnous écrivons:
<div>
<button (click)="generateNumber()">Generate Number</button>
<ul>
<li *ngFor="let n of numbers | sorted">{{ n }}</li>
</ul>
</div>
Nous ajoutons un bouton qui appelle le generateNumber méthode que nous avons créée dans le composant. Et puis nous utilisons notre sorted pipe pour retourner une version triée du numbers déployer. Nous rendons ensuite chaque valeur du tableau trié dans un li élément.
Maintenant, lorsque nous cliquons sur le bouton Générer un numéro, nous voyons que la liste des numéros est automatiquement triée car nous faisons le sorted tuyau impur en réglant le pure propriété à false.
Si nous fixons pure à true ou supprimer le pure nous voyons que la liste des numéros ne sera pas triée lorsque nous cliquons sur le bouton Générer un numéro.
Rendre le tuyau impur lui fera surveiller les changements dans le numbers le contenu du tableau.
Nous pouvons utiliser des canaux impurs avec des objets pour le faire fonctionner lorsque le contenu d’un objet change. Par exemple, nous faisons le numbers interface avec:
ng g interface numbers
Puis dans numbers.tsnous écrivons:
export interface Numbers {
foo: number;
bar: number;
baz: number;
}
Ensuite, en sorted.pipe.tsnous écrivons:
import { Pipe, PipeTransform } from "@angular/core";
import { Numbers } from "./numbers";
@Pipe({
name: "sorted",
pure: false,
})
export class SortedPipe implements PipeTransform {
transform(numbers: Numbers, ...args: unknown[]): Numbers {
const sortedEntries = Object.entries(numbers).sort(
([, val1], [, val2]) => val1 - val2
);
const sortedObj = Object.fromEntries(sortedEntries);
return sortedObj as Numbers;
}
}
Dans le transform méthode, nous obtenons la paire clé-valeur dans numbers avec Object.entries.
Et puis nous appelons sort avec une fonction qui obtient la valeur de la deuxième entrée du tableau du tableau de paires clé-valeur, nous sommes triés. Nous retournons le val1 - val2 pour les trier par ordre croissant.
Ensuite, nous reconvertissons le tableau en un objet avec Object.fromEntries et retournez-le.
Ensuite, en app.component.tsnous écrivons:
import { Component } from "@angular/core";
import { Numbers } from "./numbers";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
numbers = { foo: Math.random(), bar: Math.random(), baz: Math.random() };
generateNumbers() {
this.numbers.foo = Math.random();
this.numbers.bar = Math.random();
this.numbers.baz = Math.random();
}
toJson(obj: Numbers) {
return JSON.stringify(obj);
}
}
Nous avons ajouté le generateNumbers fonction pour modifier les valeurs de la number Propriétés. Et nous avons un toJson fonction qui retourne obj sous forme de chaîne JSON.
Dans app.component.htmlnous écrivons:
<div>
<button (click)="generateNumbers()">Generate Numbers</button>
<div>{{ toJson(numbers | sorted) }}</div>
</div>
appeler toJson avec le numbers objet transformé par notre sorted canal impur pour trier les propriétés de l’objet afin qu’elles soient triées par ordre croissant des nombres.
Par conséquent, lorsque nous cliquons sur Générer des nombres, nous voyons que l’objet rendu sera toujours trié par l’ampleur des propriétés numériques.
Conclusion
Les tuyaux nous permettent de restituer les éléments dans les modèles de composants comme nous le souhaitons.
Il existe deux types de tuyaux dans Angular : les tuyaux purs et impurs. Un tube pur est un tube qui est exécuté lorsqu’une valeur d’entrée JavaScript primitive telle que des chaînes, des nombres, des booléens, des symboles ou une référence d’objet change.
Les tuyaux purs doivent être des fonctions pures. Les fonctions pures prennent une entrée et renvoient une sortie. Ils n’ont pas d’effets secondaires. Les modifications au sein des objets sont ignorées avec les canaux purs. Lorsque des modifications ont lieu, le tube s’exécute et la dernière modification est rendue.
Les canaux impurs sont des canaux capables de détecter des changements dans les objets et les tableaux.
Source link