Obsežen vodnik za cevi v Angularju

Cevi v Angular uporabnikom omogočajo preoblikovanje podatkov, preden so prikazani v pogledu. Cevi so podobne filtrom v drugih programskih jezikih, vendar so bolj prilagodljive in jih je mogoče prilagoditi posebnim potrebam. Tukaj boste raziskali, kako uporabiti cevi v svoji aplikaciji Angular.

Kaj so cevi kotne?

Kotne cevi so transformatorji podatkov, zaradi katerih je vaša aplikacija bolj dinamična. Kot vhod vzamejo vrednost in kot izhod vrnejo transformirano vrednost. Preoblikovanje podatkov je lahko tako preprosto, kot je oblikovanje datuma ali valute, ali tako zapleteno, kot je filtriranje ali razvrščanje seznama elementov.

Lahko uporabite cevi v vaših komponentah Angular in vaše predloge. Cevi so preproste za uporabo in jih lahko verižite, da ustvarite bolj zapletene transformacije.

Angular ponuja več vgrajenih cevi, vključno z DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, in AsyncPipe. Zagotavlja tudi funkcionalnost za ustvarjanje cevi po meri.

Vsaka vgrajena cev Angular opravlja edinstveno funkcijo in vam lahko pomaga pri preoblikovanju podatkov.

DatePipe

The DatePipe formatov in prikazov vaše spremenljivke datuma in časa v določenem formatu glede na vaše lokalne nastavitve. Za razliko od drugih okvirov, ki zahtevajo Paketi JavaScript za oblikovanje datuma in ure, Angular uporablja DatePipe. Uporabiti DatePipe v svoji aplikaciji dodajte simbol cevi (|), ki mu sledi datum in vse dodatne parametre.

Na primer:

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

V tem primeru prenesete Trenutni datum spremenljivka skozi DatePipe, ki ga nato oblikuje v skladu s privzeto obliko datuma. Vi definirate Trenutni datum spremenljivko v datoteki TypeScript vaše komponente.

Tukaj je primer:

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

Prav tako lahko posredujete dodatne parametre v DatePipe za prilagoditev izhoda:

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

Zgornji blok kode je opravil shortDate parameter za DatePipe. To pove DatePipe da formatirate datum s kratkim zapisom datuma. Poleg shortDate parameter, lahko konfigurirate DatePipe z uporabo različnih parametrov, vključno z z, longDatein oblike datuma po meri, kot je dd/MM/LL.

UpperCasePipe in LowerCasePipe

The UpperCasePipe in LowerCasePipe spremenite svoja besedila. Svoja besedila pretvorite v velike črke z uporabo UpperCasePipe in male črke z uporabo LowerCasePipe.

Za uporabo UpperCasePipe in LowerCasePipe, dodajte simbol cevi (|), ki mu sledi male črke za uporabo LowerCasePipe oz velike črke za uporabo UpperCasePipe.

Spodaj je primer uporabe UpperCasePipe in LowerCasePipe:

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

CurrencyPipe

Uporabljati CurrencyPipe, lahko v svoji aplikaciji formatirate številke v valuto. The CurrencyPipe oblikuje številke glede na vaše lokalne nastavitve. Če želite oblikovati svoje številke z CurrencyPipe, uporabite simbol cevi, ki mu sledi valuta.

Na primer:

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

V tem primeru je CurrencyPipe pretvori številsko spremenljivko v valuto. Privzeto je CurrencyPipe pretvori spremenljivke v dolarje. Če želite to spremeniti, lahko konfigurirate CurrencyPipe za pretvorbo v druge valute s posredovanjem dodatnih parametrov.

Tukaj je primer:

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

Tukaj, mimo britanski funt parameter za CurrencyPipe. To zagotavlja, da število spremenljivka pretvori v valuto britanski funt.

DecimalPipe in PercentPipe

The DecimalPipe pretvori vaša števila v decimalke, medtem ko PercentPipe pretvori vaše številke v odstotke.

Za uporabo DecimalPipe, uporabite simbol cevi, ki mu sledi število in dodatni parametri. Za uporabo PercentPipe, storite enako, vendar zamenjajte število z odstotkov brez dodatnih parametrov.

Na primer:

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

Dodatni parametri, posredovani v DecimalPipe nadzor števila prikazanih celih in delnih števk. The 1 parameter določa, da mora obstajati vsaj ena cela številka. Za primerjavo, 2.3 parameter določa, da morajo biti vsaj dve in največ tri ulomke.

JsonPipe

The JsonPipe je vgrajena cev, ki pretvori podatke v format niza JSON. Uporablja se predvsem za odpravljanje napak. Lahko uporabite JsonPipe tako na objektih kot na nizih.

Sintaksa za uporabo JsonPipe kot sledi:

{{ expression | json }}

tukaj, izražanje so podatki, ki jih želite pretvoriti v format JSON. Operater cevi (|) uporablja JsonPipe do izraza.

Na primer, definirajte predmet in matriko v svoji komponenti:

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

Zgornji blok kode definira a uporabnik predmet in a profili niz. Zdaj lahko uporabite JsonPipe za pretvorbo predmeta in matrike v JSON.

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

Tukaj, JsonPipe bo pretvoril uporabnik predmet in profili matriko v niz JSON, ki ga lahko hitro pregledate v svojih predlogah med razvojem ali odpravljanjem napak.

SlicePipe

The SlicePipe je zelo podoben JavaScriptu rezina () metoda. The SlicePipe formatira nize ali nize tako, da ekstrahira njihove elemente, da ustvari nove nize ali nize.

Za uporabo SlicePipe, uporabite simbol cevi, ki mu sledi rezina in dva parametra, začetni in končni indeks. Začetni indeks je položaj v matriki ali nizu, kjer bo cev začela ekstrahirati elemente, končni indeks pa je položaj, kjer bo cev prenehala ekstrahirati elemente.

Tukaj je primer uporabe SlicePipe:

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

V tem primeru je SlicePipe bo izvlekel prva dva elementa iz vrvica spremenljivka, element z indeksom 0 in element z indeksom 1. Nadalje bo izvlekel prvi element iz niz spremenljivka. The SlicePipe je uporaben, ko želite v predlogi prikazati le del podatkov.

AsyncPipe

AsyncPipe je vgrajena linija Angular, ki samodejno naroča in odjavlja naročnino na Observable ali Promise. Vrne zadnjo vrednost, ki jo odda Observable ali Promise.

Sintaksa za uporabo AsyncPipe kot sledi:

{{ expression | async }}

Tukaj je izraz Observable ali Promise, na katerega se želite naročiti.

Na primer:

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

Lahko uporabiš AsyncPipe da se naročite na ta Observable in prikažete zadnjo oddano vrednost takole:

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

Ta blok kode bo izpisal najnovejšo številko, ki jo odda Observable. AsyncPipe je zelo uporaben pri ravnanju z asinhronimi operacijami v vaših predlogah. Samodejno se naroči na Observable ali Promise, ko se komponenta inicializira, in odjavi, ko se uniči.

Veriženje cevi v Angular

Cevi lahko povežete v verigo, da izvedete več transformacij v enem izrazu. Veriženje cevi je tako preprosto kot uporaba številnih operaterjev cevi (|) v enem samem izrazu. Izhod vsake cevi postane vhod za naslednjo.

Tukaj je osnovna sintaksa:

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

Datumski objekt lahko na primer pretvorite v niz z uporabo DatePipe in nato pretvorite ta niz v velike črke z uporabo UpperCasePipe.

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

Ustvarite dinamične aplikacije z uporabo cevi

Cevi so zmogljiva funkcija v Angularju, ki vam omogoča preoblikovanje podatkov, preden se prikažejo v pogledu. Tukaj ste spoznali različne vgrajene cevi Angular, kot so DatePipe, CurrencyPipe, UpperCasePipe itd. Naučili ste se tudi, kako jih uporabiti v svoji aplikaciji za ustvarjanje bolj dinamične vsebine. Z uporabo cevi lahko razvijalci ustvarijo bolj prilagodljive in dinamične spletne aplikacije z manj kode.