Compréhension approfondie de PIPE (pipeline) dans Angular

Dans angulaire, les tuyaux peuvent être utilisés pour traiter les données d'entrée, et différents tuyaux ont des fonctions différentes. Alors, comment utiliser spécifiquement le tuyau ? L'article suivant vous guidera à travers une étude approfondie de PIPE (pipeline) dans Angular et verra comment l'utiliser.

PIPE, traduit par pipe. Angular Les tuyaux sont un moyen d'écrire des transformations de valeur d'affichage qui peuvent être déclarées dans les composants HTML. Angular Les tuyaux étaient auparavant appelés filtres en AngularJS et sont appelés tuyaux commençant par Angular 2. Les tuyaux prennent les données en entrée et les transforment en sortie souhaitée.

Angular Pipes Prend en entrée des entiers, des chaînes, des tableaux et des dates, séparés par |, puis les convertit en formats selon les besoins et les affiche dans le navigateur. Dans les expressions d'interpolation, vous pouvez définir un canal et l'utiliser en fonction de la situation. Il existe de nombreux types de canaux qui peuvent être utilisés dans les applications Angular.

[Recommandations de tutoriel associées : "Tutoriel angulaire"]

Pipeline intégré

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• Number -> String

  • DecimalPipe

  • PercentPipe

  • CurrencyPipe

• Object -> StringJsonPipe

  • DatePipe

• Tools SlicePipe

  • AsyncPipe

  • I18nPluralPipe

  • I18nSelectPipe

Utilisation

Conversion majuscule

<div>
  <p ngNonBindable>{{ &#39;Angular&#39; | uppercase }}</p>
  <p>{{ &#39;Angular&#39; | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

Formatage de la date

<div>
  <p ngNonBindable>{{ today | date: &#39;shortTime&#39; }}</p>
  <p>{{ today | date: &#39;shortTime&#39; }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

Formatage numérique

<div>
  <p ngNonBindable>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p>
  <p>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p> <!-- Output: 3.1416 -->
</div>

Sérialisation d'objets JavaScript

<div>
  <p ngNonBindable>{{ { name: &#39;semlinker&#39; } | json }}</p>
  <p>{{ { name: &#39;semlinker&#39; } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

Paramètres de canal

Le canal peut recevoir n'importe quel nombre de paramètres. Pour l'utiliser, ajoutez et la valeur du paramètre après le nom du canal. Par exemple, , si vous devez transmettre plusieurs paramètres, utilisez des deux-points pour séparer les paramètres. Les exemples spécifiques sont les suivants :

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 }}</p> <!-- Output: sem -->
</div>

:Chaîne de pipelinesnumber: '1.4-4'

. Vous pouvez transmettre plusieurs tuyaux connectés ensemble pour former une chaîne de pipelines afin de traiter les données.

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
</div>

Pipeline personnalisé

Ce qui suit utilise des pipelines utilisés dans des projets antérieurs comme exemples pour expliquer les étapes des pipelines personnalisés :

Utilisez le décorateur

pour définir les informations

de
• , telles que le nom de

  - c'est-à-dire que l'attribut @Pipe PipemetadataPipename implémente le

  défini dans l'interface 🎜>Méthode

• PipeTransformtransformDéfinition

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

@Pipe({ name: "formatError" })
export class FormatErrorPipe implements PipeTransform {
    constructor() {}

    transform(value: any, module: string) {
        if (value.code) {
            return value.desc;
        } else {
            return value.message;
        }
    }
}

Utilisation

<div *ngIf="errorMessage">
    <div class="message-box error mb-16" [@animate]="{value:&#39;*&#39;,params:{opacity:&#39;0&#39;,duration:&#39;200ms&#39;}}">
        {{errorMessage.error | formatError:"auth"}}
    </div>
</div>

Fin~

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation ! !

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!