Kædning og parameterangivelse af pipes
Kombinér pipes, og videregiv argumenter.
Kædning og parameterangivelse af pipes er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Sende argumenter til pipes
Pipes kan modtage argumenter efter et kolon. Formen er {{ value | pipeName:arg1:arg2 }}. Hvert argument adskilles fra det næste med sit eget kolon.
Ét argument
Mange pipes tager ét argument. For eksempel tager date-pipen en formatstreng.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Flere argumenter
slice-pipen tager et start- og et slutindeks, som hver angives efter sit eget kolon.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Dynamiske argumenter
Argumenter kan være egenskaber på komponenten og ikke kun bogstavelige værdier. Det gør det muligt at ændre pipens funktion reaktivt.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;Hvad er pipe-kæder?
Du kan kæde pipes sammen, så outputtet fra én pipe bliver inputtet til den næste. De kører fra venstre mod højre.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Eksempel på kædning
Her formateres en dato og konverteres derefter til store bogstaver. date-pipen kører først, efterfulgt af uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->Rækkefølgen betyder noget
Rækkefølgen af kædede pipes ændrer resultatet. Hvis du anvender uppercase før slice i stedet for efter, giver det den samme tekst her, men med transformerende pipes kan rækkefølgen have stor betydning.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Kombinere argumenter og kædning
Du kan frit kombinere argumenter og kædning. Hver pipe modtager stadig outputtet fra den forrige pipe som sin værdi.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Kædning med valuta
Formatér et tal som valuta, og beskær det derefter. Selvom det er usædvanligt, viser det, at pipes kan kombineres som byggeblokke.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Tips til læsbarhed
Lange pipe-kæder kan gøre koden mindre læsbar. Hvis en kæde bliver kompleks, kan du i stedet overveje at beregne værdien i komponenten eller bruge en brugerdefineret pipe.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Mellemrum omkring pipes
Mellemrum omkring | og : er valgfri, men anbefales af hensyn til læsbarheden. Angular ignorerer overflødige mellemrum.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Hurtigt tjek
Test din forståelse af pipe-argumenter og kædning.
Opsummering
Du har lært at sende ét eller flere argumenter med koloner, bruge dynamiske argumenter fra komponentegenskaber og kæde pipes, så outputtet flyder fra venstre mod højre.
Derefter skal du bygge din egen brugerdefinerede pipe.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Kædning og parameterangivelse af pipes” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Kædning og parameterangivelse af pipes”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Kædning og parameterangivelse af pipes”?
Kombinér pipes, og videregiv argumenter. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Kædning og parameterangivelse af pipes”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Brug af indbyggede pipes
- Kædning og parameterangivelse af pipes
- Oprettelse af brugerdefinerede pipes
- Rene kontra urene pipes