Una guida completa ai tubi in angolare

Le pipe in Angular consentono agli utenti di trasformare i dati prima che vengano visualizzati nella vista. Le pipe sono simili ai filtri in altri linguaggi di programmazione, ma sono più flessibili e possono essere personalizzate per soddisfare esigenze specifiche. Qui, esplorerai come utilizzare le pipe nella tua applicazione Angular.

Cosa sono i tubi in Angular?

Le pipe angolari sono trasformatori di dati che rendono la tua app più dinamica. Prendono un valore come input e restituiscono un valore trasformato come output. La trasformazione dei dati può essere semplice come formattare una data o una valuta o complessa come filtrare o ordinare un elenco di elementi.

Puoi usare i tubi nei tuoi componenti angolari e i tuoi modelli. Le pipe sono facili da usare e puoi concatenarle per creare trasformazioni più complesse.

Angular fornisce diversi tubi integrati tra cui DatePipe, UpperCasePipe, LowerCasePipe

, ValutaPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, E AsyncPipe. Fornisce inoltre la funzionalità per creare pipe personalizzate.

Ogni pipe angolare integrata svolge una funzione unica e può aiutarti a trasformare i dati.

DatePipe

IL DatePipe formati e display le variabili di data e ora in un formato specificato, considerando la tua lingua. A differenza di altri framework che richiedono Pacchetti JavaScript per formattare data e ora, Angular usa il DatePipe. Usare DatePipe nella tua applicazione, aggiungi il simbolo pipe (|) seguito da data ed eventuali parametri aggiuntivi.

Per esempio:

<p>Today's date is {{ currentDate | date }}p>

In questo esempio, si passa il data odierna variabile attraverso il DatePipe, che quindi lo formatta in base al formato della data predefinito. Tu definisci il data odierna variabile nel file TypeScript del componente.

Ecco un esempio:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Puoi anche passare parametri aggiuntivi al file DatePipe per personalizzare l'output:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Il blocco di codice sopra ha superato il shortDate parametro al DatePipe. Questo racconta il DatePipe per formattare la data utilizzando il formato di data breve. Accanto al shortDate parametro, è possibile configurare il DatePipe utilizzando vari parametri, tra cui z.z, data lungae formati di data personalizzati come gg/MM/AA.

UpperCasePipe e LowerCasePipe

IL UpperCasePipe E LowerCasePipe trasforma i tuoi testi Trasformi i tuoi testi in maiuscolo usando il UpperCasePipe e minuscolo usando il LowerCasePipe.

Per usare il UpperCasePipe E LowerCasePipe, aggiungi il simbolo pipe (|) seguito da minuscolo usare il LowerCasePipe O maiuscolo usare il UpperCasePipe.

Di seguito è riportato un esempio di come utilizzare il UpperCasePipe E LowerCasePipe:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

ValutaPipe

Usando il ValutaPipe, puoi formattare i numeri in una valuta nella tua applicazione. IL ValutaPipe formatta i numeri in base alle impostazioni locali. Per formattare i tuoi numeri usando il ValutaPipe, utilizzare il simbolo pipe seguito da valuta.

Per esempio:

<p>{{ number | currency }}p>

In questo esempio, il ValutaPipe converte la variabile numero in una valuta. Per impostazione predefinita, il ValutaPipe converte le variabili in dollari. Per modificare questo, è possibile configurare il file ValutaPipe per convertire in altre valute passando parametri aggiuntivi.

Ecco un esempio:

<p>{{ number | currency: 'GBP' }}p>

Qui, si passa il Sterlina inglese parametro al ValutaPipe. Ciò garantisce che il numero la variabile si converte nella valuta Sterlina britannica.

DecimalPipe e PercentPipe

IL DecimalPipe trasforma i tuoi numeri in decimali, mentre il PercentPipe converte i tuoi numeri in percentuali.

Per usare il DecimalPipe, utilizzare il simbolo pipe seguito da numero e parametri aggiuntivi. Per usare il PercentPipe, fai lo stesso ma sostituisci il file numero con per cento senza parametri aggiuntivi.

Per esempio:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

I parametri aggiuntivi passati al file DecimalPipe controllare il numero di cifre intere e frazionarie visualizzate. IL 1 Il parametro specifica che deve essere presente almeno una cifra intera. In confronto, il 2.3 Il parametro specifica che devono essere presenti almeno due e fino a tre cifre frazionarie.

JsonPipe

IL JsonPipe è una pipe incorporata che converte i dati in un formato di stringa JSON. Viene utilizzato principalmente per scopi di debug. Puoi usare il JsonPipe sia sugli oggetti che sugli array.

La sintassi per l'utilizzo di JsonPipe è come segue:

{{ expression | json }}

Qui, espressione sono i dati che vuoi convertire in formato JSON. L'operatore pipe (|) applica il JsonPipe all'espressione.

Ad esempio, definisci un oggetto e un array nel tuo componente:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Il blocco di codice sopra definisce a utente oggetto e a profili vettore. Ora puoi usare il JsonPipe per convertire l'oggetto e l'array in JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Ecco, il JsonPipe convertirà il utente oggetto e il profili array in una stringa JSON, che puoi ispezionare rapidamente nei tuoi modelli durante lo sviluppo o il debug.

SlicePipe

IL SlicePipe è molto simile a JavaScript fetta() metodo. IL SlicePipe formatta array o stringhe estraendo i loro elementi per creare nuovi array o stringhe.

Per usare il SlicePipe, si utilizza il simbolo pipe seguito da fetta e due parametri, gli indici iniziale e finale. L'indice iniziale è la posizione nell'array o nella stringa in cui la pipe inizierà a estrarre gli elementi e l'indice finale è il punto in cui la pipe smetterà di estrarre gli elementi.

Ecco un esempio di come utilizzare il SlicePipe:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

In questo esempio, il SlicePipe estrarrà i primi due elementi dal file corda variabile, l'elemento all'indice 0 e l'elemento all'indice 1. Inoltre, estrarrà il primo elemento dal file vettore variabile. IL SlicePipe è utile quando si desidera visualizzare solo una parte dei dati nel modello.

AsyncPipe

AsyncPipe è una pipe angolare incorporata che si iscrive e annulla automaticamente l'iscrizione a un Observable o Promise. Restituisce l'ultimo valore emesso da Observable o Promise.

La sintassi per l'utilizzo AsyncPipe è come segue:

{{ expression | async }}

Qui, l'espressione è l'osservabile o la promessa a cui vuoi iscriverti.

Per esempio:

let numbers = of(1, 2, 3, 4, 5);

Puoi usare AsyncPipe per iscriversi a questo Observable e visualizzare l'ultimo valore emesso in questo modo:

<p>{{ numbers | async }}p>

Questo blocco di codice produrrà l'ultimo numero emesso da Observable. AsyncPipe è molto utile quando si gestiscono operazioni asincrone nei modelli. Si iscrive automaticamente a Observable o Promise quando il componente viene inizializzato e annulla l'iscrizione quando viene distrutto.

Tubi di concatenamento in angolare

È possibile concatenare le pipe per eseguire più trasformazioni in un'unica espressione. Il concatenamento di pipe è semplice quanto l'utilizzo di numerosi operatori pipe (|) in un'unica espressione. L'output di ogni pipe diventa l'input per il successivo.

Ecco la sintassi di base:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Ad esempio, puoi trasformare un oggetto data in una stringa utilizzando il DatePipe e quindi convertire quella stringa in maiuscolo usando il UpperCasePipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Crea applicazioni dinamiche utilizzando le pipe

Le pipe sono una potente funzionalità di Angular che consente di trasformare i dati prima che vengano visualizzati nella vista. Qui, hai imparato a conoscere le varie pipe integrate offerte da Angular, come DatePipe, CurrencyPipe, UpperCasePipe, ecc. Hai anche imparato come usarli nella tua applicazione per creare contenuti più dinamici. Usando le pipe, gli sviluppatori possono creare applicazioni web più flessibili e dinamiche con meno codice.