Hur man skapar anpassade rör i Angular

Pipes är en kraftfull vinkelfunktion som låter dig transformera och formatera data i din applikation. De ger ett bekvämt sätt att manipulera data innan de visas för användaren, vilket gör din applikation mer dynamisk och användarvänlig.

Angular erbjuder en mängd olika inbyggda rör som DatePipe, CurrencyPipe och UpperCasePipe. Tillsammans med de inbyggda rören som Angular erbjuder, kan du skapa anpassade rör för att transformera data på vilket sätt du behöver.

Konfigurera ditt vinkelprojekt

Innan du skapar anpassade rör, se till att du förstå pipes i Angular. För att kunna ställa in ett Angular-projekt, se till att du har Angular CLI installerat på din maskin. Du kan installera den med npm (Node Package Manager).

Installera Angular CLI genom att köra följande kommando:

npm install -g @angular/cli

Skapa sedan ett nytt Angular-projekt genom att köra det här kommandot:

ng new my-app

När du har skapat projektet, navigera till din projektkatalog och öppna din applikation på din IDE.

Skapa ett anpassat rör

Nu när du har ställt in din Angular-applikation är nästa sak att göra att skapa ett anpassat rör. För att skapa ett anpassat rör måste du skapa ett nytt med Angular CLI.

För att göra detta, kör följande kommando i din app katalog på terminalen:

ng generate pipe customPipe

Detta kommando genererar två namngivna filer custom-pipe.pipe.ts och special-pipe.pipe.spec.ts i src/app katalog. Custom-pipe.pipe.ts-filen är en TypeScript-fil som innehåller koden för att definiera ditt anpassade rör. Du kommer att använda custom-pipe.pipe.spec.ts för att köra tester på den anpassade pipen.

I den custom-pipe.pipe.ts fil, hittar du dessa kodrader:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Detta kodblock importerar Rör dekoratör och PipeTransform gränssnitt från @angular/kärna modul. Pipe-dekoratorn definierar metadata för röret, och pipe-klassen implementerar PipeTransform-gränssnittet.

I den CustomPipePipe klass, implementerar du PipeTransform gränssnitt, vilket kräver implementering av omvandla metod. Transformmetoden är ansvarig för att transformera ingångsvärdet.

De omvandla Metoden tar två parametrar, värde och args. Värdeparametern representerar rörets transformationsvärde, och parametern args representerar valfria parametrar som du kanske vill lägga till.

Nu har du förstått bottenplattan custom-pipe.pipe.ts fil, ersätt kodblocket ovan med denna kod:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

I detta kodblock är omvandla metoden tar värde parametern av typen sträng som ett argument och returnerar en array av strängar. Transformmetoden delar upp inmatningssträngen i en uppsättning individuella tecken med hjälp av dela metod och returnerar den resulterande arrayen.

Integrera det anpassade röret i din applikation

Du har skapat ditt anpassade rör och kan nu använda det i dina Angular-mallar. Innan du använder det anpassade röret i din applikation, importera och deklarera det i din app.modul.ts fil. För att göra detta, ersätt koden i app.module.ts med följande:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Nu kan du använda röret i dina mallar. Öppna app.component.html fil och lägg till följande kod:

<p>{{ 'apple' | CustomPipe }}p>

I det här exemplet använder du CustomPipe rör för att transformera strängen 'äpple' till en strängarray.

Testa ditt anpassade rör

För att se din anpassade pipe i aktion, kör Angular utvecklingsserver. Du kan göra detta genom att köra följande terminalkommando:

ng serve

Öppna din webbläsare och navigera till http://localhost: 4200. Du bör se den transformerade strängen på sidan:

Ta dina vinkelapplikationer till nästa nivå

Pipes är ett kraftfullt Angular-verktyg som låter dig transformera och formatera data i din applikation. Du kan skapa anpassade rör för att passa dina specifika behov och göra din Angular-applikation mer dynamisk.

Ett annat sätt att ta dina Angular-applikationer till nästa nivå är att förstå routing i Angular. Routing är ett nyckelbegrepp som låter dig styra hur användare navigerar i din applikation. Genom att förstå routing kan du bygga ensidiga applikationer som är mer användarvänliga och effektiva.