Tuyaux angulaires : un guide complet

Les

Pipes dans Angular sont des fonctions simples utilisées pour transformer des données dans des modèles sans modifier les données sous-jacentes. Les tuyaux prennent une valeur, la traitent et renvoient une sortie formatée ou transformée. Ils sont souvent utilisés pour formater des dates, des nombres, des chaînes et même des tableaux ou des objets.

Ils vous permettent de formater et d'afficher les données dans un format plus lisible ou pertinent directement dans la vue sans altérer le modèle de données sous-jacent.

L'utilisation de pipes aide à garder le code propre et lisible. Au lieu d'écrire une logique complexe dans les modèles ou les composants, vous pouvez encapsuler cette logique dans un pipe, qui peut ensuite être réutilisé dans différentes parties de votre application.
Par exemple, si vous développez une plateforme de blog où les utilisateurs peuvent voir la date de publication des articles. Les dates doivent être affichées dans un format convivial, tel que « 31 août 2024 », au lieu du format brut « 2024-08-31T14:48:00.000Z ». Avec pipes, vous pouvez utiliser le DatePipe intégré d'Angular dans le modèle au lieu de formater manuellement la date dans le composant, encombrant le code et réduisant la lisibilité.

<p>Published on: {{ article.publishDate | date:'longDate' }}</p>

Pour appliquer un tube, utilisez le pipe opérateur (|) dans une expression de modèle, comme indiqué dans l'exemple de code ci-dessus.

Tuyaux intégrés

Angular est livré avec plusieurs canaux intégrés qui couvrent les tâches courantes (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, etc.). Savoir comment les utiliser peut rendre votre code plus propre et plus efficace.

Exemples :

<pre class="brush:php;toolbar:false">{{ user | json }}

Tuyaux paramétrés

De nombreux pipes angulaires acceptent des paramètres pour personnaliser leur comportement.

Pour spécifier le paramètre, suivez le nom du canal avec un deux-points (:) et la valeur du paramètre

Certains pipes acceptent plusieurs paramètres, qui sont séparés par des deux-points supplémentaires.

Paramètres peuvent être facultatifs ou obligatoires. Supposons que vous disposiez d'un canal personnalisé qui formate la devise et vous oblige à spécifier le type de devise en tant que paramètre. Si ce paramètre n'est pas fourni, le tube ne pourra peut-être pas formater la valeur correctement.

<p>The product price is {{ price | customCurrency:'USD' }}</p>

1. DatePipe avec paramètres

<p>Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}</p>

Ceci formate la date comme « 31 août 2024, 14:48:00 ».

2. CurrencyPipe avec paramètres

<p>Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}</p>

Ceci formate le prix comme « 1 235 € » (arrondi sans décimale).

Tuyaux de chaînage

Vous pouvez enchaîner plusieurs tuyaux ensemble pour réaliser des transformations complexes.

<p>{{ article.content | slice:0:100 | uppercase }}</p>

Cela découpera les 100 premiers caractères de article.content et les convertira en majuscules.

Tuyaux personnalisés

Parfois, les canaux intégrés peuvent ne pas répondre à vos besoins spécifiques et vous devrez créer un canal personnalisé pour gérer la logique spécifique. Voici comment procéder.

Exemple :

Dans l'exemple suivant, nous allons créer un tube qui ajoute un message d'accueil à un nom comme « Bonjour, Alice ! »

Exécutez la commande suivante pour générer un nouveau tube :

ng generate pipe greet

Maintenant, modifions le fichier greet.pipe.ts dans le répertoire src/app pour inclure la logique du canal :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Une fois votre pipe prête, vous pouvez l'utiliser dans vos modèles.

<p>{{ 'Alice' | greet }}</p>

Création d'un canal personnalisé paramétré

Nous allons maintenant rendre le message d'accueil personnalisable, afin que vous puissiez dire « Salut, Alice ! » ou "Bienvenue, Alice!" en fonction de ce que vous passez au tuyau.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

La méthode de transformation a désormais un deuxième paramètre, salutation. Si aucun message d'accueil n'est fourni, la valeur par défaut est « Bonjour ».

Vous pouvez désormais personnaliser le message d'accueil dans vos modèles.

<p>{{ 'Alice' | greet:'Hi' }}</p>
<p>{{ 'Bob' | greet:'Welcome' }}</p>

Tuyaux purs ou impurs

1. Pipes pures
Par défaut, tous les tuyaux angulaires sont purs. Un pipe pur n'est appelé que lorsque des données d'entrée (comme un nombre ou une chaîne) ou lorsque la référence à un objet (comme un tableau ou une date) change. Cela rend les tuyaux purs efficaces et performants car le tuyau ne fonctionne pas inutilement.

Cependant, si vos données sont plus complexes, comme un tableau d'éléments, Angular peut ne pas remarquer les changements à l'intérieur du tableau (comme l'ajout d'un nouvel élément) car la référence au tableau n'a pas changé.

Sauf nécessaire, gardez vos tuyaux purs pour éviter les rendus inutiles et maintenir les performances.

Exemple :

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

Dans votre modèle :

<ul>
  <li *ngFor="let item of (items | onSale)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

If you add a new item to the items array that’s on sale, you might expect it to show up in the list. But if you simply push the new item into the array, the list might not update because the array reference hasn’t changed.

2. Impure Pipes

An impure pipe, on the other hand, is called every time Angular performs a change detection cycle. However, because they run so often, they can slow down your app.

Example:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In your template:

<ul>
  <li *ngFor="let item of (items | onSaleImpure)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

Now, when you add a new item, the pipe will notice the change and update the list.

Best Practices for Using Pipes

1. Keep Pipes Simple. Avoid Heavy Computations in Pipes

2. Name Pipes Clearly and Descriptively

3. Keep Pipes Focused on a Single Responsibility

4. Avoid Impure Pipes When Possible

5. Test Custom Pipes Thoroughly

Conclusion

Angular pipes streamline data transformation tasks, making your code more modular, reusable, and maintainable. They help to enforce consistency across the application and improve the readability of your templates, which is crucial for developing scalable and maintainable applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!