Een uitgebreide gids voor pijpen in hoekig

Met pijpen in Angular kunnen gebruikers gegevens transformeren voordat deze in de weergave worden weergegeven. Pipes zijn vergelijkbaar met filters in andere programmeertalen, maar zijn flexibeler en kunnen worden aangepast aan specifieke behoeften. Hier zult u onderzoeken hoe u pijpen kunt gebruiken in uw Angular-toepassing.

Wat zijn pijpen in hoekig?

Hoekige pijpen zijn gegevenstransformatoren die uw app dynamischer maken. Ze nemen een waarde als invoer en retourneren een getransformeerde waarde als uitvoer. Gegevenstransformatie kan zo eenvoudig zijn als het opmaken van een datum of valuta, of zo complex als het filteren of sorteren van een lijst met items.

Je kunt de pijpen gebruiken in uw hoekcomponenten en uw sjablonen. Pipes zijn gemakkelijk te gebruiken en u kunt ze koppelen om complexere transformaties te creëren.

Angular levert diverse inbouwleidingen waaronder DatePipe, HoofdlettersPipe, LowerCasePipe

, ValutaPijp, DecimalePijp, Procentpijp, JsonPipe, PlakPijp, En Asynchroon. Het biedt ook de functionaliteit om aangepaste pijpen te maken.

Elke ingebouwde Angular pipe vervult een unieke functie en kan u helpen bij het transformeren van gegevens.

DatePipe

De DatePipe formaten en weergaven uw datum- en tijdvariabelen in een opgegeven indeling, rekening houdend met uw locale. In tegenstelling tot andere kaders die vereisen JavaScript-pakketten om datum en tijd op te maken, gebruikt Angular de DatePipe. Gebruiken DatePipe voeg in uw toepassing het pipe-symbool (|) toe, gevolgd door datum en eventuele aanvullende parameters.

Bijvoorbeeld:

<p>Today's date is {{ currentDate | date }}p>

In dit voorbeeld passeer je de huidige datum variabel door de DatePipe, die het vervolgens formatteert volgens het standaard datumformaat. U definieert de huidige datum variabele in het TypeScript-bestand van uw component.

Hier is een voorbeeld:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

U kunt ook aanvullende parameters doorgeven aan de DatePipe om de uitvoer aan te passen:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Het bovenstaande codeblok is geslaagd voor de korteDatum parameter naar de DatePipe. Dit vertelt de DatePipe om de datum op te maken met behulp van de korte datumnotatie. Naast de korteDatum parameter, kunt u de DatePipe met behulp van verschillende parameters, waaronder z, lange datum, en aangepaste datumnotaties zoals dd/MM/JJ.

UpperCasePipe en LowerCasePipe

De HoofdlettersPipe En LowerCasePipe transformeer uw teksten. U zet uw teksten om in hoofdletters met behulp van de HoofdlettersPipe en kleine letters met behulp van de LowerCasePipe.

Om de HoofdlettersPipe En LowerCasePipe, voeg het pijpsymbool (|) toe, gevolgd door kleine letters om de te gebruiken LowerCasePipe of hoofdletters om de te gebruiken HoofdlettersPipe.

Hieronder ziet u een voorbeeld van het gebruik van de HoofdlettersPipe En LowerCasePipe:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

ValutaPijp

De... gebruiken ValutaPijp, kunt u getallen in uw toepassing opmaken in een valuta. De ValutaPijp formatteert de getallen volgens uw locale. Om uw nummers op te maken met behulp van de ValutaPijp, gebruik het pijpsymbool gevolgd door munteenheid.

Bijvoorbeeld:

<p>{{ number | currency }}p>

In dit voorbeeld is de ValutaPijp converteert de getalvariabele naar een valuta. Standaard is de ValutaPijp converteert variabelen naar dollars. Om dit te wijzigen, kunt u de ValutaPijp om te zetten naar andere valuta's door aanvullende parameters door te geven.

Hier is een voorbeeld:

<p>{{ number | currency: 'GBP' }}p>

Hier passeer je de GBP parameter naar de ValutaPijp. Dit zorgt ervoor dat de nummer variabele converteert naar de valuta van het Britse pond.

DecimalPipe en PercentPipe

De DecimalePijp transformeert uw getallen in decimalen, terwijl de Procentpijp converteert uw getallen naar percentages.

Om de DecimalePijp, gebruik het pijpsymbool gevolgd door nummer en aanvullende parameters. Om de Procentpijp, doe hetzelfde maar vervang de nummer met procent zonder extra parameters.

Bijvoorbeeld:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

De aanvullende parameters die zijn doorgegeven aan de DecimalePijp controle over het aantal weergegeven gehele getallen en breuken. De 1 parameter geeft aan dat er ten minste één geheel getal moet zijn. Ter vergelijking: de 2.3 parameter specificeert dat er minimaal twee en maximaal drie breukcijfers moeten zijn.

JsonPipe

De JsonPipe is een ingebouwde pijp die gegevens converteert naar een JSON-tekenreeksindeling. Het wordt voornamelijk gebruikt voor foutopsporingsdoeleinden. U kunt de JsonPipe op zowel objecten als arrays.

De syntaxis voor het gebruik van de JsonPipe is als volgt:

{{ expression | json }}

Hier, uitdrukking zijn de gegevens die u wilt converteren naar JSON-indeling. De pipe-operator (|) past de JsonPipe naar de uitdrukking.

Definieer bijvoorbeeld een object en een array in uw component:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Het bovenstaande codeblok definieert a gebruiker voorwerp en een profielen reeks. Nu kunt u de JsonPipe om het object en de array om te zetten in JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Hier de JsonPipe zal de gebruiker voorwerp en de profielen array in een JSON-tekenreeks, die u snel kunt inspecteren in uw sjablonen tijdens ontwikkeling of foutopsporing.

PlakPijp

De PlakPijp lijkt erg op JavaScript plak() methode. De PlakPijp formatteert arrays of strings door hun elementen te extraheren om nieuwe arrays of strings te maken.

Om de PlakPijp, gebruik je het pijpsymbool gevolgd door plak en twee parameters, de begin- en eindindexen. De startindex is de positie in de array of string waar de pipe begint met het extraheren van elementen, en de eindindex is waar de pipe stopt met het extraheren van elementen.

Hier is een voorbeeld van het gebruik van de PlakPijp:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

In dit voorbeeld is de PlakPijp haalt de eerste twee elementen uit de snaar variabele, het element op index 0 en het element op index 1. Verder zal het het eerste element uit de reeks variabel. De PlakPijp is handig wanneer u slechts een deel van de gegevens in de sjabloon wilt weergeven.

Asynchroon

Asynchroon is een ingebouwde Angular pipe die zich automatisch aan- en afmeldt voor een Observable of Promise. Het retourneert de laatste waarde die is uitgezonden door de Observable of Promise.

De syntaxis voor gebruik Asynchroon is als volgt:

{{ expression | async }}

Hier is de uitdrukking de waarneembare of belofte waarop u zich wilt abonneren.

Bijvoorbeeld:

let numbers = of(1, 2, 3, 4, 5);

Je kunt gebruiken Asynchroon om u te abonneren op deze Observable en de laatst uitgezonden waarde als volgt weer te geven:

<p>{{ numbers | async }}p>

Dit codeblok geeft het laatste nummer weer dat door de Observable is uitgezonden. Asynchroon is erg handig bij het afhandelen van asynchrone bewerkingen in uw sjablonen. Het abonneert zich automatisch op de Observable of Promise wanneer het onderdeel wordt geïnitialiseerd en wordt uitgeschreven wanneer het wordt vernietigd.

Het ketenen van pijpen in hoekig

U kunt pijpen aan elkaar koppelen om meerdere transformaties in één uitdrukking uit te voeren. Het koppelen van pijpen is net zo eenvoudig als het gebruik van meerdere pijpoperatoren (|) in één uitdrukking. De output van elke pijp wordt de input voor de volgende.

Dit is de basissyntaxis:

<p>{{ expression | pipe1 | pipe2 |... }}p>

U kunt bijvoorbeeld een datumobject omzetten in een tekenreeks met behulp van de DatePipe en converteer die string vervolgens naar hoofdletters met behulp van de HoofdlettersPipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Maak dynamische toepassingen met behulp van pijpen

Pipes zijn een krachtige functie in Angular waarmee u gegevens kunt transformeren voordat deze in de weergave worden weergegeven. Hier leerde je over de verschillende ingebouwde pijpen die Angular aanbiedt, zoals DatePipe, CurrencyPipe, UpperCasePipe, etc. U hebt ook geleerd hoe u ze in uw toepassing kunt gebruiken om meer dynamische inhoud te maken. Met behulp van pipes kunnen ontwikkelaars flexibelere en dynamischere webapplicaties maken met minder code.