Concatenamento e parametrizzazione delle pipe
Combini le pipe e passi gli argomenti.
Concatenamento e parametrizzazione delle pipe è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Passare argomenti alle pipe
Le pipe possono accettare argomenti dopo i due punti. La sintassi è {{ value | pipeName:arg1:arg2 }}. Ogni argomento è separato dal proprio due punti.
Un singolo argomento
Molte pipe accettano un argomento. Ad esempio, la pipe date accetta una stringa di formato.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Più argomenti
La pipe slice accetta un indice iniziale e uno finale, passati ciascuno con il proprio due punti.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Argomenti dinamici
Gli argomenti possono essere proprietà del componente, non solo valori letterali. In questo modo può modificare il comportamento della pipe in modo reattivo.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;Che cos'è il concatenamento delle pipe?
Può concatenare le pipe, in modo che l'output di una pipe diventi l'input della successiva. Vengono eseguite da sinistra verso destra.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Esempio di concatenamento
In questo caso una data viene formattata e poi convertita in maiuscolo. La pipe date viene eseguita per prima, seguita da uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->L'ordine è importante
L'ordine delle pipe concatenate modifica il risultato. Applicare uppercase prima di slice o dopo produce qui lo stesso testo, ma con le pipe che trasformano i dati l'ordine può essere molto importante.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Combinare argomenti e concatenamento
Può combinare liberamente argomenti e concatenamento. Ogni pipe riceve comunque come valore l'output della pipe precedente.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Concatenare con currency
Formatti un numero come valuta e poi lo accorci. Sebbene sia un caso insolito, questo esempio mostra che le pipe sono elementi costitutivi componibili.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Suggerimenti per la leggibilità
Le catene lunghe di pipe possono rendere il codice meno leggibile. Se una catena diventa complessa, valuti la possibilità di calcolare il valore nel componente o di usare invece una pipe personalizzata.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Spazi intorno alle pipe
Gli spazi intorno a | e : sono facoltativi, ma consigliati per migliorare la leggibilità. Angular ignora gli spazi aggiuntivi.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Verifica rapida
Verifichi la Sua comprensione degli argomenti e del concatenamento delle pipe.
Riepilogo
Ha imparato a passare uno o più argomenti usando i due punti, a usare argomenti dinamici provenienti dalle proprietà del componente e a concatenare le pipe, facendo fluire l'output da sinistra verso destra.
Ora creerà una pipe personalizzata.
Domande Frequenti
La lezione «Concatenamento e parametrizzazione delle pipe» è gratuita?
Sì — il testo completo di «Concatenamento e parametrizzazione delle pipe» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Concatenamento e parametrizzazione delle pipe»?
Combini le pipe e passi gli argomenti. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Concatenamento e parametrizzazione delle pipe»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Utilizzo delle pipe integrate
- Concatenamento e parametrizzazione delle pipe
- Creazione di pipe personalizzate
- Pipe pure e impure