Ibland räcker inte de inbyggda rören i Angular till. Du kan behöva en unik transformation som är specifik för din applikation. I sådana fall kan du skapa ett eget anpassat rör.

Anta att du har en lista med uppgifter, där varje uppgift kan vara antingen slutförd eller inte. För att göra slutförda uppgifter visuellt utmärkande vill du automatiskt lägga till en ✅-emoji till deras titlar. Istället för att hårdkoda denna logik i varje mall kan du skapa ett dedikerat rör för detta.

Hur du skapar ett anpassat rör

För att generera ett anpassat rör i Angular, använd följande CLI-kommando. Vi kallar det formatTitle, eftersom dess uppgift är att formatera uppgiftens titel baserat på dess slutförandestatus:

Detta kommando skapar två filer:

• format-title.pipe.ts — rörlogiken;

• format-title.pipe.spec.ts — enhetstestfil (du kan ta bort den om du inte behöver tester just nu).

När Angular genererar pipen ser det ut ungefär så här:

Den här koden gör följande:

• Klassen FormatTitlePipe implementerar PipeTransform, vilket säkerställer att pipen har en transform-metod;

• transform-metoden tar emot ett värde (inmatningen) och valfria argument och returnerar ett transformerat resultat. För närvarande returneras bara inmatningen oförändrad;

• Pipens namn (formatTitle) definieras i @Pipe-dekorationen — det är namnet som används i mallen.

Just nu existerar pipen men utför ingen faktisk logik. Nästa steg är att lägga till den faktiska logiken.

Anpassad Pipe-implementering

Vi behöver lägga till en ✅-emoji till titeln baserat på uppgiftens slutförandestatus (task.completed). Uppdatera pipen för att tillämpa vår anpassade formateringslogik:

Metoden transform tar två argument:

• value — uppgiftens titel;

• completed — ett booleskt värde som anger om uppgiften är klar.

Om uppgiften är slutförd (true), läggs en ✅-emoji till i slutet av titeln. Annars returneras titeln oförändrad.

Använda pipen i en mall

För att använda pipen i din Angular-mall, applicera den med pipesymbolen |:

Vad som händer här:

• task.title är värdet som skickas till pipen;

• formatTitle:task.completed applicerar pipen och skickar in flaggan completed;

• Titeln kommer antingen att inkludera emoji-symbolen ✅ eller inte, beroende på uppgiftens status.

Att använda pipes på detta sätt hjälper till att hålla dina mallar rena och läsbara, samt flyttar formateringslogik till återanvändbar och testbar kod.