Noen ganger er ikke de innebygde rørene i Angular tilstrekkelige. Du kan ha behov for en unik transformasjon som er spesifikk for din applikasjon. I slike tilfeller kan du lage ditt eget egendefinerte rør.

Anta at du har en liste med oppgaver, og hver oppgave kan enten være fullført eller ikke. For å gjøre fullførte oppgaver mer synlige, ønsker du automatisk å legge til en ✅-emoji i tittelen deres. I stedet for å hardkode denne logikken i hver mal, kan du lage et dedikert rør for dette.

Hvordan lage et egendefinert rør

For å generere et egendefinert rør i Angular, bruk følgende CLI-kommando. Vi kaller det formatTitle, siden dets oppgave er å formatere oppgavetittelen basert på fullføringsstatus:

Dette vil opprette to filer:

• format-title.pipe.ts — rørlogikken;

• format-title.pipe.spec.ts — en enhetstestfil (du kan slette den hvis du ikke trenger testing nå).

Når Angular genererer pipen, ser det omtrent slik ut:

Dette gjør koden:

• Klassen FormatTitlePipe implementerer PipeTransform, som sikrer at pipen har en transform-metode;

• transform-metoden mottar en verdi (input) og valgfrie argumenter, og returnerer et transformert resultat. Foreløpig returnerer den bare input uendret;

• Pipens navn (formatTitle) er definert i @Pipe-dekoren — dette er navnet som brukes i malen.

For øyeblikket eksisterer pipen, men den gjør ingenting. Neste steg er å legge til selve logikken.

Implementering av egendefinert pipe

Vi må legge til en ✅-emoji til tittelen basert på oppgavens fullføringsstatus (task.completed). Oppdater pipen for å bruke vår egendefinerte formateringslogikk:

Metoden transform tar to argumenter:

• value — oppgavetittelen;

• completed — en boolsk verdi som indikerer om oppgaven er fullført.

Hvis oppgaven er fullført (true), legges en ✅-emoji til på slutten av tittelen. Ellers returneres tittelen uendret.

Bruke pipen i en mal

For å bruke pipen i Angular-malen din, bruk pipesymbolet |:

Dette skjer her:

• task.title er verdien som sendes til pipen;

• formatTitle:task.completed bruker pipen og sender inn completed-flagget;

• Tittelen vil enten inkludere ✅-emojien eller ikke, avhengig av statusen til oppgaven.

Å bruke piper på denne måten bidrar til å holde malene rene og lesbare, og flytter formateringslogikken til gjenbrukbar og testbar kode.