En omfattende guide til rør i vinkel

Pipes i Angular lar brukere transformere data før de vises i visningen. Rør ligner på filtre i andre programmeringsspråk, men er mer fleksible og kan tilpasses for å møte spesifikke behov. Her vil du utforske hvordan du bruker rør i Angular-applikasjonen din.

Hva er rør i vinkel?

Vinkelrør er datatransformatorer som gjør appen din mer dynamisk. De tar en verdi som input og returnerer en transformert verdi som output. Datatransformasjon kan være så enkelt som å formatere en dato eller valuta, eller så komplisert som å filtrere eller sortere en liste over elementer.

Du kan bruke rørene i Angular-komponentene dine og malene dine. Rør er enkle å bruke, og du kan kjede dem for å lage mer komplekse transformasjoner.

Angular gir flere innebygde rør bl.a DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, Desimalrør, PercentPipe, JsonPipe, SlicePipe, og AsyncPipe. Det gir også funksjonaliteten til å lage tilpassede rør.

Hvert innebygde Angular-rør utfører en unik funksjon og kan hjelpe deg med å transformere data.

DatePipe

De DatePipe formater og skjermer dato- og tidsvariablene dine i et spesifisert format, med tanke på lokaliteten din. I motsetning til andre rammer som krever JavaScript-pakker for å formatere dato og klokkeslett, Angular bruker DatePipe. Å bruke DatePipe i søknaden din legger du til rørsymbolet (|) etterfulgt av Dato og eventuelle tilleggsparametere.

For eksempel:

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

I dette eksemplet passerer du dagens dato variabel gjennom DatePipe, som deretter formaterer den i henhold til standard datoformat. Du definerer dagens dato variabel i komponentens 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 flere parametere til DatePipe for å tilpasse utdataene:

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

Kodeblokken ovenfor passerte kort Dato parameter til DatePipe. Dette forteller DatePipe for å formatere datoen med det korte datoformatet. Ved siden av kort Dato parameter, kan du konfigurere DatePipe ved hjelp av ulike parametere, inkludert z, lang dato, og egendefinerte datoformater som f.eks dd/MM/ÅÅ.

UpperCasePipe og LowerCasePipe

De UpperCasePipe og LowerCasePipe forvandle tekstene dine. Du forvandler tekstene dine til store bokstaver ved å bruke UpperCasePipe og små bokstaver ved å bruke LowerCasePipe.

For å bruke UpperCasePipe og LowerCasePipe, legg til rørsymbolet (|) etterfulgt av små bokstaver å bruke LowerCasePipe eller stor bokstav å bruke UpperCasePipe.

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

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

CurrencyPipe

Bruker CurrencyPipe, kan du formatere tall til en valuta i applikasjonen din. De CurrencyPipe formaterer tallene i henhold til din lokalitet. For å formatere tallene dine ved å bruke CurrencyPipe, bruk rørsymbolet etterfulgt av valuta.

For eksempel:

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

I dette eksemplet er CurrencyPipe konverterer tallvariabelen til en valuta. Som standard er CurrencyPipe konverterer variabler til dollar. For å endre dette kan du konfigurere CurrencyPipe å konvertere til andre valutaer ved å sende flere parametere.

Her er et eksempel:

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

Her passerer du GBP parameter til CurrencyPipe. Dette sikrer at Antall variabel konverterer til britiske punds valuta.

DecimalPipe og PercentPipe

De Desimalrør forvandler tallene dine til desimaler, mens PercentPipe konverterer tallene dine til prosenter.

For å bruke Desimalrør, bruk rørsymbolet etterfulgt av Antall og tilleggsparametere. For å bruke PercentPipe, gjør det samme, men bytt ut Antall med prosent uten ekstra parametere.

For eksempel:

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

De ekstra parameterne som er sendt til Desimalrør kontrollere antall heltall og brøksiffer som vises. De 1 parameteren spesifiserer at det skal være minst ett heltall. Til sammenligning 2.3 parameteren spesifiserer at det skal være minst to og opptil tre brøksiffer.

JsonPipe

De JsonPipe er et innebygd rør som konverterer data til et JSON-strengformat. Den brukes hovedsakelig til feilsøkingsformål. Du kan bruke JsonPipe på både objekter og matriser.

Syntaksen for å bruke JsonPipe er som følgende:

{{ expression | json }}

Her, uttrykk er dataene du vil konvertere til JSON-format. Røroperatøren (|) bruker JsonPipe til uttrykket.

Definer for eksempel et objekt og en matrise i komponenten din:

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 bruker gjenstand og en profiler array. Nå kan du bruke JsonPipe for å konvertere objektet og matrisen til JSON.

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

Her, den JsonPipe vil konvertere bruker objektet og profiler array inn i en JSON-streng, som du raskt kan inspisere i malene dine under utvikling eller feilsøking.

SlicePipe

De SlicePipe er veldig lik JavaScript skive() metode. De SlicePipe formaterer matriser eller strenger ved å trekke ut elementene deres for å lage nye matriser eller strenger.

For å bruke SlicePipe, bruker du rørsymbolet etterfulgt av skive og to parametere, start- og sluttindeksene. Startindeksen er posisjonen i matrisen eller strengen der røret vil begynne å trekke ut elementer, og sluttindeksen er der røret vil slutte å trekke ut elementer.

Her er et eksempel på hvordan du bruker SlicePipe:

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

I dette eksemplet er SlicePipe vil trekke ut de to første elementene fra streng variabel, elementet ved indeks 0 og elementet ved indeks 1. Videre vil det trekke ut det første elementet fra array variabel. De SlicePipe er nyttig når du bare vil vise en del av dataene i malen.

AsyncPipe

AsyncPipe er et innebygd Angular pipe som automatisk abonnerer og avregistrerer et observerbart eller løfte. Den returnerer den siste verdien som sendes ut av det observerbare eller løftet.

Syntaksen for bruk AsyncPipe er som følgende:

{{ expression | async }}

Her er uttrykket det observerbare eller løftet du ønsker å abonnere på.

For eksempel:

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

Du kan bruke AsyncPipe for å abonnere på denne observerbare og vise den siste utsendte verdien slik:

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

Denne kodeblokken vil gi ut det siste nummeret som sendes ut av den observerbare. AsyncPipe er veldig nyttig når du håndterer asynkrone operasjoner i malene dine. Den abonnerer automatisk på det observerbare eller løftet når komponenten initialiseres og avsluttes når den blir ødelagt.

Kjederør i kantet

Du kan lenke rør sammen for å utføre flere transformasjoner i et enkelt uttrykk. Å kjede rør er like enkelt som å bruke mange røroperatorer (|) i et enkelt uttrykk. Utgangen fra hvert rør blir input for det neste.

Her er den grunnleggende syntaksen:

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

Du kan for eksempel transformere et datoobjekt til en streng ved å bruke DatePipe og konverter deretter den strengen til store bokstaver ved hjelp av UpperCasePipe.

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

Lag dynamiske applikasjoner ved hjelp av rør

Pipes er en kraftig funksjon i Angular som lar deg transformere data før de vises i visningen. Her lærte du om de ulike innebygde rørene Angular tilbyr, som DatePipe, CurrencyPipe, UpperCasePipe, etc. Du har også lært hvordan du bruker dem i applikasjonen din for å lage mer dynamisk innhold. Ved å bruke pipes kan utviklere lage mer fleksible og dynamiske webapplikasjoner med mindre kode.