Hvordan lage tilpassede rør i vinkel

Pipes er en kraftig vinkelfunksjon som lar deg transformere og formatere data i applikasjonen din. De gir en praktisk måte å manipulere data før de vises for brukeren, noe som gjør applikasjonen din mer dynamisk og brukervennlig.

Angular tilbyr en rekke innebygde rør som DatePipe, CurrencyPipe og UpperCasePipe. Sammen med de innebygde rørene Angular tilbyr, kan du lage tilpassede rør for å transformere data på alle måter du trenger.

Sett opp vinkelprosjektet ditt

Før du oppretter tilpassede rør, sørg for at du forstå rør i Angular. For å kunne sette opp et Angular-prosjekt, sørg for at du har Angular CLI installert på maskinen din. Du kan installere den med npm (Node Package Manager).

Installer Angular CLI ved å kjøre følgende kommando:

npm install -g @angular/cli

Deretter oppretter du et nytt Angular-prosjekt ved å kjøre denne kommandoen:

ng new my-app

Når du har opprettet prosjektet, naviger til prosjektkatalogen din og åpne programmet på IDE-en din.

Lag et tilpasset rør

Nå som du har satt opp Angular-applikasjonen din, er neste ting å gjøre å lage et tilpasset rør. For å lage et tilpasset rør, må du generere et nytt ved å bruke Angular CLI.

For å gjøre dette, kjør følgende kommando i appens katalog på terminalen:

ng generate pipe customPipe

Denne kommandoen vil generere to filer med navn custom-pipe.pipe.ts og spesialtilpassede.pipe.spec.ts i src/app katalog. Custom-pipe.pipe.ts-filen er en TypeScript-fil som inneholder koden for å definere din egendefinerte pipe. Du vil bruke custom-pipe.pipe.spec.ts for å kjøre tester på den tilpassede pipen.

I custom-pipe.pipe.ts fil, finner du disse kodelinjene:

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

Denne kodeblokken importerer Rør dekoratør og PipeTransform grensesnitt fra @angular/kjerne modul. Pipe-dekoratoren definerer metadataene for pipen, og pipe-klassen implementerer PipeTransform-grensesnittet.

I CustomPipePipe klasse, implementerer du PipeTransform grensesnitt, som krever implementering av forvandle metode. Transformeringsmetoden er ansvarlig for å transformere inngangsverdien.

De forvandle metoden tar to parametere, verdi og args. Verdiparameteren representerer rørets transformasjonsverdi, og args-parameteren representerer valgfrie parametere du kanskje ønsker å legge til.

Nå har du forstått kjeleplaten til custom-pipe.pipe.ts fil, erstatt kodeblokken ovenfor med denne koden:

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

I denne kodeblokken er forvandle metoden tar verdi parameter for typen streng som et argument og returnerer en rekke strenger. Transformeringsmetoden deler inndatastrengen i en rekke individuelle tegn ved å bruke dele metode og returnerer den resulterende matrisen.

Integrering av det tilpassede røret i applikasjonen din

Du har opprettet din egendefinerte pipe og kan nå bruke den i Angular-malene dine. Før du bruker det tilpassede røret i applikasjonen din, importer og deklarer den i din app.modul.ts fil. For å gjøre dette, erstatt koden i app.module.ts med følgende:

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 { }

Nå kan du bruke røret i malene dine. Åpne app.component.html fil og legg til følgende kode:

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

I dette eksemplet bruker du CustomPipe rør for å transformere strengen 'eple' inn i en strengarray.

Test ditt tilpassede rør

For å se din egendefinerte pipe i aksjon, kjør Angular-utviklingsserveren. Du kan gjøre dette ved å kjøre følgende terminalkommando:

ng serve

Åpne nettleseren og naviger til http://localhost: 4200. Du bør se den transformerte strengen vist på siden:

Ta Angular-applikasjonene dine til neste nivå

Pipes er et kraftig vinkelverktøy som lar deg transformere og formatere data i applikasjonen din. Du kan lage tilpassede rør for å passe dine spesifikke behov og gjøre Angular-applikasjonen din mer dynamisk.

En annen måte å ta Angular-applikasjonene dine til neste nivå er å forstå ruting i Angular. Ruting er et nøkkelbegrep som lar deg kontrollere hvordan brukere navigerer i applikasjonen din. Ved å forstå ruting kan du bygge enkeltsideapplikasjoner som er mer brukervennlige og effektive.