Aangepaste pijpen maken in Angular

Pipes zijn een krachtige Angular-functie waarmee u gegevens in uw toepassing kunt transformeren en opmaken. Ze bieden een handige manier om gegevens te manipuleren voordat deze aan de gebruiker worden weergegeven, waardoor uw applicatie dynamischer en gebruiksvriendelijker wordt.

Angular biedt een verscheidenheid aan ingebouwde pijpen, zoals DatePipe, ValutaPipe en UpperCasePipe. Naast de ingebouwde leidingen die Angular biedt, kunt u aangepaste leidingen maken om gegevens op elke gewenste manier te transformeren.

Stel uw hoekproject in

Voordat u aangepaste pijpen maakt, moet u ervoor zorgen dat u pijpen in Angular begrijpen. Om een ​​Angular-project te kunnen opzetten, moet u ervoor zorgen dat de Angular CLI op uw computer is geïnstalleerd. Je kunt het installeren met npm (knooppuntpakketbeheer).

Installeer de Angular CLI door de volgende opdracht uit te voeren:

npm install -g @angular/cli

Maak vervolgens een nieuw Angular-project door deze opdracht uit te voeren:

ng new my-app

Nadat u het project heeft gemaakt, navigeert u naar uw projectmap en opent u uw toepassing op uw IDE.

Maak een aangepaste pijp

Nu u uw Angular-applicatie heeft ingesteld, is het volgende wat u moet doen het maken van een aangepaste pipe. Om een ​​aangepaste pipe te maken, moet u een nieuwe genereren met behulp van de Angular CLI.

Om dit te doen, voert u de volgende opdracht uit in de map van uw app op de terminal:

ng generate pipe customPipe

Deze opdracht genereert twee bestanden met de naam custom-pipe.pipe.ts En custom-pipe.pipe.spec.ts in de src/app map. Het custom-pipe.pipe.ts-bestand is een TypeScript-bestand die de code bevat voor het definiëren van uw aangepaste pijp. U gebruikt de custom-pipe.pipe.spect.ts om tests uit te voeren op de aangepaste pipe.

In de custom-pipe.pipe.ts bestand, vindt u deze regels code:

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

Dit codeblok importeert de Pijp decorateur en de PijpTransform interface van de @hoekig/kern module. De Pipe-decorator definieert de metagegevens voor de pijp en de pijpklasse implementeert de PipeTransform-interface.

In de AangepastePipePipe klasse, implementeer je de PijpTransform interface, waarvoor de implementatie van de transformeren methode. De transformatiemethode is verantwoordelijk voor het transformeren van de invoerwaarde.

De transformeren methode heeft twee parameters nodig, waarde En arg. De parameter value vertegenwoordigt de transformatiewaarde van de pipe, en de parameter args vertegenwoordigt optionele parameters die u mogelijk wilt toevoegen.

Nu heb je de standaardtekst van de custom-pipe.pipe.ts bestand, vervang het bovenstaande codeblok door deze code:

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

In dit codeblok wordt de transformeren methode neemt de waarde parameter van het type snaar als argument en retourneert een array met tekenreeksen. De transformatiemethode splitst de invoerreeks op in een reeks afzonderlijke tekens met behulp van de gesplitst methode en retourneert de resulterende array.

Integratie van de aangepaste leiding in uw toepassing

U heeft met succes uw aangepaste pijp gemaakt en kunt deze nu gebruiken in uw Angular-sjablonen. Voordat u de aangepaste leiding in uw toepassing gebruikt, importeert u deze en declareert u deze in uw app.module.ts bestand. Om dit te doen, vervangt u de code in app.module.ts door het volgende:

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 kunt u de pijp in uw sjablonen gebruiken. Open de app.component.html bestand en voeg de volgende code toe:

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

In dit voorbeeld gebruik je de Aangepaste pijp pijp om de snaar te transformeren 'appel' in een stringarray.

Test uw aangepaste pijp

Om uw aangepaste pipe in actie te zien, voert u de Angular-ontwikkelserver uit. U kunt dit doen door de volgende terminalopdracht uit te voeren:

ng serve

Open uw browser en navigeer naar http://localhost: 4200. Je zou de getransformeerde string op de pagina moeten zien verschijnen:

Breng uw hoektoepassingen naar een hoger niveau

Pipes zijn een krachtige Angular-tool waarmee u gegevens in uw toepassing kunt transformeren en opmaken. U kunt op maat gemaakte buizen maken die aan uw specifieke behoeften voldoen en uw Angular-toepassing dynamischer maken.

Een andere manier om uw Angular-applicaties naar een hoger niveau te tillen, is door de routing in Angular te begrijpen. Routering is een belangrijk concept waarmee u kunt bepalen hoe gebruikers door uw toepassing navigeren. Door routing te begrijpen, kunt u applicaties van één pagina bouwen die gebruiksvriendelijker en efficiënter zijn.