En omfattende guide til rør i kantet

Pipes i Angular giver brugerne mulighed for at transformere data, før de vises i visningen. Pipes ligner filtre i andre programmeringssprog, men er mere fleksible og kan tilpasses til at opfylde specifikke behov. Her vil du udforske, hvordan du bruger rør i din Angular-applikation.

Hvad er rør i vinkel?

Vinkelrør er datatransformatorer, der gør din app mere dynamisk. De tager en værdi som input og returnerer en transformeret værdi som output. Datatransformation kan være så simpel som at formatere en dato eller valuta, eller så kompleks som at filtrere eller sortere en liste over elementer.

Du kan bruge rørene i dine Angular komponenter og dine skabeloner. Rør er nemme at bruge, og du kan kæde dem sammen for at skabe mere komplekse transformationer.

Angular giver flere indbyggede rør bl.a DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, Decimalrør, PercentPipe, JsonPipe, SlicePipe, og AsyncPipe. Det giver også funktionaliteten til at skabe brugerdefinerede rør.

Hvert indbygget Angular rør udfører en unik funktion og kan hjælpe dig med at transformere data.

DatePipe

Det DatePipe formater og skærme dine dato- og tidsvariabler i et specificeret format, i betragtning af din lokalitet. I modsætning til andre rammer, der kræver JavaScript-pakker til at formatere dato og klokkeslæt, Angular bruger DatePipe. At bruge DatePipe i din ansøgning skal du tilføje rørsymbolet (|) efterfulgt af dato og eventuelle yderligere parametre.

For eksempel:

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

I dette eksempel passerer du nuværende dato variabel gennem DatePipe, som derefter formaterer den i henhold til standarddatoformatet. Du definerer nuværende dato variabel i din komponents TypeScript-fil.

Her er et eksempel:

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

Du kan også sende yderligere parametre til DatePipe for at tilpasse output:

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

Kodeblokken ovenfor bestod kort Dato parameter til DatePipe. Dette fortæller DatePipe for at formatere datoen ved hjælp af det korte datoformat. Ved siden af kort Dato parameter, kan du konfigurere DatePipe ved hjælp af forskellige parametre, bl.a z, lang Dato, og brugerdefinerede datoformater som f.eks dd/MM/ÅÅ.

UpperCasePipe og LowerCasePipe

Det UpperCasePipe og LowerCasePipe transformere dine tekster. Du forvandler dine tekster til store bogstaver ved hjælp af UpperCasePipe og små bogstaver ved hjælp af LowerCasePipe.

For at bruge UpperCasePipe og LowerCasePipe, tilføj rørsymbolet (|) efterfulgt af små bogstaver at bruge LowerCasePipe eller store bogstaver at bruge UpperCasePipe.

Nedenfor er et eksempel på, hvordan du bruger UpperCasePipe og LowerCasePipe:

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

CurrencyPipe

Bruger CurrencyPipe, kan du formatere tal til en valuta i din applikation. Det CurrencyPipe formaterer tallene efter din lokalitet. For at formatere dine tal ved hjælp af CurrencyPipe, brug rørsymbolet efterfulgt af betalingsmiddel.

For eksempel:

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

I dette eksempel er CurrencyPipe konverterer talvariablen til en valuta. Som standard er CurrencyPipe konverterer variable til dollars. For at ændre dette kan du konfigurere CurrencyPipe at konvertere til andre valutaer ved at overføre yderligere parametre.

Her er et eksempel:

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

Her passerer du engelske pund parameter til CurrencyPipe. Dette sikrer, at nummer variabel konverterer til det britiske punds valuta.

DecimalPipe og PercentPipe

Det Decimalrør omdanner dine tal til decimaler, mens PercentPipe konverterer dine tal til procenter.

For at bruge Decimalrør, brug rørsymbolet efterfulgt af nummer og yderligere parametre. For at bruge PercentPipe, gør det samme, men udskift nummer med procent uden yderligere parametre.

For eksempel:

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

De yderligere parametre overført til Decimalrør kontrollere antallet af viste heltal og brøkcifre. Det 1 parameter angiver, at der skal være mindst ét ​​heltal. Til sammenligning 2.3 parameter angiver, at der skal være mindst to og op til tre brøkcifre.

JsonPipe

Det JsonPipe er et indbygget rør, der konverterer data til et JSON-strengformat. Det bruges hovedsageligt til debugging formål. Du kan bruge JsonPipe på både objekter og arrays.

Syntaksen for at bruge JsonPipe er som følgende:

{{ expression | json }}

Her, udtryk er de data, du vil konvertere til JSON-format. Røroperatøren (|) anvender JsonPipe til udtrykket.

Definer for eksempel et objekt og en matrix i din komponent:

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

Kodeblokken ovenfor definerer en bruger genstand og en profiler array. Nu kan du bruge JsonPipe at konvertere objektet og arrayet til JSON.

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

Her, den JsonPipe vil konvertere bruger objektet og profiler array i en JSON-streng, som du hurtigt kan inspicere i dine skabeloner under udvikling eller fejlfinding.

SlicePipe

Det SlicePipe er meget lig JavaScript skive() metode. Det SlicePipe formaterer arrays eller strenge ved at udtrække deres elementer for at skabe nye arrays eller strenge.

For at bruge SlicePipe, bruger du rørsymbolet efterfulgt af skive og to parametre, start- og slutindekset. Startindekset er den position i arrayet eller strengen, hvor røret vil begynde at udtrække elementer, og slutindekset er, hvor røret vil stoppe med at udtrække elementer.

Her er et eksempel på, hvordan du bruger SlicePipe:

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

I dette eksempel er SlicePipe vil udtrække de to første elementer fra snor variabel, elementet ved indeks 0 og elementet ved indeks 1. Yderligere vil det udtrække det første element fra array variabel. Det SlicePipe er nyttig, når du kun vil vise en del af data i skabelonen.

AsyncPipe

AsyncPipe er et indbygget Angular rør, der automatisk til- og afmelder sig et observerbart eller løfte. Det returnerer den seneste værdi udsendt af det observerbare eller løfte.

Syntaksen til brug AsyncPipe er som følgende:

{{ expression | async }}

Her er udtrykket det observerbare eller løfte, du ønsker at abonnere på.

For eksempel:

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

Du kan bruge AsyncPipe for at abonnere på denne observerbare og vise den seneste udsendte værdi som denne:

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

Denne kodeblok udsender det seneste tal udsendt af den observerbare. AsyncPipe er meget nyttig, når du håndterer asynkrone operationer i dine skabeloner. Den abonnerer automatisk på det observerbare eller løfte, når komponenten initialiseres, og afmelder sig, når den bliver ødelagt.

Kæderør i kantet

Du kan kæde rør sammen for at udføre flere transformationer i et enkelt udtryk. At kæde rør er så simpelt som at bruge adskillige røroperatorer (|) i et enkelt udtryk. Outputtet fra hvert rør bliver input til det næste.

Her er den grundlæggende syntaks:

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

For eksempel kan du transformere et datoobjekt til en streng ved hjælp af DatePipe og konverter derefter den streng til store bogstaver ved hjælp af UpperCasePipe.

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

Opret dynamiske applikationer ved hjælp af rør

Pipes er en kraftfuld funktion i Angular, der giver dig mulighed for at transformere data, før de vises i visningen. Her lærte du om de forskellige indbygningsrør Angular tilbyder, såsom DatePipe, CurrencyPipe, UpperCasePipe mv. Du lærte også, hvordan du bruger dem i din applikation til at skabe mere dynamisk indhold. Ved hjælp af pipes kan udviklere skabe mere fleksible og dynamiske webapplikationer med mindre kode.