En omfattande guide till rör i vinkel

Pipes i Angular tillåter användare att transformera data innan den visas i vyn. Pipes liknar filter i andra programmeringsspråk men är mer flexibla och kan anpassas för att möta specifika behov. Här kommer du att utforska hur du använder rör i din Angular-applikation.

Vad är rör i Angular?

Vinklade rör är datatransformatorer som gör din app mer dynamisk. De tar ett värde som indata och returnerar ett transformerat värde som utdata. Datatransformation kan vara så enkelt som att formatera ett datum eller en valuta, eller så komplex som att filtrera eller sortera en lista med objekt.

Du kan använda rören i dina Angular-komponenter och dina mallar. Rör är enkla att använda och du kan koppla ihop dem för att skapa mer komplexa transformationer.

Angular tillhandahåller flera inbyggda rör bl.a DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, Decimalrör, PercentPipe, JsonPipe, SlicePipe, och AsyncPipe. Det ger också funktionalitet för att skapa anpassade rör.

Varje inbyggt Angular rör utför en unik funktion och kan hjälpa dig att transformera data.

DatePipe

De DatePipe format och skärmar dina datum- och tidsvariabler i ett specificerat format, med tanke på din plats. Till skillnad från andra ramverk som kräver JavaScript-paket för att formatera datum och tid, Angular använder DatePipe. Att använda DatePipe i din ansökan lägger du till rörsymbolen (|) följt av datum och eventuella ytterligare parametrar.

Till exempel:

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

I det här exemplet passerar du dagens datum variabel genom DatePipe, som sedan formaterar det enligt standarddatumformatet. Du definierar dagens datum variabel i din komponents TypeScript-fil.

Här är ett exempel:

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

Du kan också skicka ytterligare parametrar till DatePipe för att anpassa utdata:

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

Kodblocket ovan passerade kort datum parameter till DatePipe. Detta berättar för DatePipe för att formatera datumet med det korta datumformatet. Vid sidan av kort datum parameter kan du konfigurera DatePipe använda olika parametrar, inklusive z, lång datum, och anpassade datumformat som t.ex dd/MM/ÅÅ.

UpperCasePipe och LowerCasePipe

De UpperCasePipe och LowerCasePipe förvandla dina texter. Du förvandlar dina texter till versaler med hjälp av UpperCasePipe och gemener med hjälp av LowerCasePipe.

För att använda UpperCasePipe och LowerCasePipe, lägg till rörsymbolen (|) följt av små bokstäver att använda LowerCasePipe eller versal att använda UpperCasePipe.

Nedan är ett exempel på hur man använder UpperCasePipe och LowerCasePipe:

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

CurrencyPipe

Använda CurrencyPipe, kan du formatera siffror till en valuta i din applikation. De CurrencyPipe formaterar siffrorna efter din plats. För att formatera dina nummer med hjälp av CurrencyPipe, använd rörsymbolen följt av valuta.

Till exempel:

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

I det här exemplet är CurrencyPipe konverterar talvariabeln till en valuta. Som standard är CurrencyPipe omvandlar variabler till dollar. För att ändra detta kan du konfigurera CurrencyPipe att konvertera till andra valutor genom att skicka ytterligare parametrar.

Här är ett exempel:

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

Här passerar du GBP parameter till CurrencyPipe. Detta säkerställer att siffra variabel konverterar till Storbritanniens punds valuta.

DecimalPipe och PercentPipe

De Decimalrör omvandlar dina tal till decimaler, medan PercentPipe konverterar dina siffror till procentsatser.

För att använda Decimalrör, använd rörsymbolen följt av siffra och ytterligare parametrar. För att använda PercentPipe, gör samma sak men byt ut siffra med procent utan ytterligare parametrar.

Till exempel:

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

De ytterligare parametrarna som skickas till Decimalrör kontrollera antalet heltals- och bråksiffror som visas. De 1 parametern anger att det ska finnas minst en heltalssiffra. I jämförelse 2.3 parametern anger att det ska finnas minst två och upp till tre bråksiffror.

JsonPipe

De JsonPipe är ett inbyggt rör som konverterar data till ett JSON-strängformat. Det används främst för felsökningsändamål. Du kan använda JsonPipe på både objekt och arrayer.

Syntaxen för att använda JsonPipe enligt följande:

{{ expression | json }}

Här, uttryck är den data du vill konvertera till JSON-format. Röroperatören (|) tillämpar JsonPipe till uttrycket.

Definiera till exempel ett objekt och en array 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;
}

Kodblocket ovan definierar en användare föremål och ett profiler array. Nu kan du använda JsonPipe för att konvertera objektet och arrayen till JSON.

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

Här, den JsonPipe kommer att konvertera användare objekt och profiler array till en JSON-sträng, som du snabbt kan inspektera i dina mallar under utveckling eller felsökning.

SlicePipe

De SlicePipe är väldigt lik JavaScript skiva() metod. De SlicePipe formaterar arrayer eller strängar genom att extrahera deras element för att skapa nya arrayer eller strängar.

För att använda SlicePipe, använder du rörsymbolen följt av skiva och två parametrar, start- och slutindex. Startindex är den position i arrayen eller strängen där röret kommer att börja extrahera element, och slutindexet är där röret slutar extrahera element.

Här är ett exempel på hur man använder SlicePipe:

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

I det här exemplet är SlicePipe kommer att extrahera de två första elementen från sträng variabel, elementet vid index 0 och elementet vid index 1. Vidare kommer det att extrahera det första elementet från array variabel. De SlicePipe är användbart när du bara vill visa en del av data i mallen.

AsyncPipe

AsyncPipe är ett inbyggt vinkelrör som automatiskt prenumererar på och avregistrerar ett observerbart eller löfte. Den returnerar det senaste värdet som sänds ut av det observerbara eller löftet.

Syntaxen för att använda AsyncPipe enligt följande:

{{ expression | async }}

Här är uttrycket det observerbara eller löftet du vill prenumerera på.

Till exempel:

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

Du kan använda AsyncPipe för att prenumerera på denna observerbara och visa det senaste emitterade värdet så här:

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

Detta kodblock kommer att mata ut det senaste numret som sänds ut av den observerbara. AsyncPipe är mycket användbart när du hanterar asynkrona operationer i dina mallar. Den prenumererar automatiskt på det observerbara eller löftet när komponenten initieras och avslutar prenumerationen när den förstörs.

Kedjerör i kantigt

Du kan koppla ihop rör för att utföra flera transformationer i ett enda uttryck. Kedja rör är lika enkelt som att använda flera röroperatorer (|) i ett enda uttryck. Utgången från varje rör blir indata för nästa.

Här är den grundläggande syntaxen:

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

Du kan till exempel omvandla ett datumobjekt till en sträng med hjälp av DatePipe och konvertera sedan den strängen till versaler med hjälp av UpperCasePipe.

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

Skapa dynamiska applikationer med hjälp av rör

Pipes är en kraftfull funktion i Angular som låter dig transformera data innan den visas i vyn. Här lärde du dig om de olika inbyggda rören Angular erbjuder, såsom DatePipe, CurrencyPipe, UpperCasePipe, etc. Du lärde dig också hur du använder dem i din applikation för att skapa mer dynamiskt innehåll. Med hjälp av pipes kan utvecklare skapa mer flexibla och dynamiska webbapplikationer med mindre kod.