Põhjalik juhend nurga all olevate torude kohta

Nurgakujulised torud võimaldavad kasutajatel andmeid enne nende kuvamist teisendada. Torud sarnanevad teiste programmeerimiskeelte filtritega, kuid on paindlikumad ja neid saab kohandada vastavalt konkreetsetele vajadustele. Siin saate uurida, kuidas torusid oma Angular-rakenduses kasutada.

Mis on nurgatorud?

Nurktorud on andmetrafod, mis muudavad teie rakenduse dünaamilisemaks. Nad võtavad väärtuse sisendiks ja tagastavad teisendatud väärtuse väljundina. Andmete teisendamine võib olla sama lihtne kui kuupäeva või valuuta vormindamine või sama keeruline kui üksuste loendi filtreerimine või sortimine.

Võite kasutada torusid teie Angular komponentides ja teie mallid. Torusid on lihtne kasutada ja saate neid aheldada, et luua keerukamaid teisendusi.

Angular pakub mitmeid sisseehitatud torusid, sealhulgas DatePipe, UpperCasePipe, Väiketähtede toru, Valuutatoru, DecimalPipe, PercentPipe, JsonPipe, SlicePipeja AsyncPipe. See pakub ka funktsiooni kohandatud torude loomiseks.

Iga sisseehitatud Angular toru täidab ainulaadset funktsiooni ja aitab teil andmeid teisendada.

DatePipe

The DatePipe vormingud ja kuvad teie kuupäeva ja kellaaja muutujad kindlas vormingus, võttes arvesse teie asukohta. Erinevalt teistest raamistikest, mis nõuavad JavaScripti paketid kuupäeva ja kellaaja vormindamiseks, Angular kasutab DatePipe. Kasutada DatePipe lisage oma rakenduses toru sümbol (|), millele järgneb kuupäeva ja mis tahes lisaparameetrid.

Näiteks:

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

Selles näites läbite tänane kuupäev muutuja kaudu DatePipe, mis seejärel vormindab selle vastavalt kuupäeva vaikevormingule. Sina määratled tänane kuupäev muutuja teie komponendi TypeScript-failis.

Siin on näide:

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

Saate edastada ka täiendavaid parameetreid DatePipe väljundi kohandamiseks:

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

Ülaltoodud koodiplokk läbis shortDate parameetri juurde DatePipe. See ütleb DatePipe kuupäeva vormindamiseks lühikese kuupäevavormingu abil. Kõrvuti shortDate parameetrit, saate konfigureerida DatePipe kasutades erinevaid parameetreid, sh z, pikk kuupäevja kohandatud kuupäevavormingud, nt pp/KK/AA.

UpperCasePipe ja LowerCasePipe

The UpperCasePipe ja Väiketähtede toru muuta oma tekste. Muutke oma tekstid suurtähtedeks, kasutades nuppu UpperCasePipe ja väiketähti kasutades Väiketähtede toru.

Et kasutada UpperCasePipe ja Väiketähtede toru, lisage toru sümbol (|), millele järgneb väiketähtedega kasutada Väiketähtede toru või suurtähtedega kasutada UpperCasePipe.

Allpool on näide selle kohta, kuidas kasutada UpperCasePipe ja Väiketähtede toru:

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

Valuutatoru

Kasutades Valuutatoru, saate oma rakenduses numbreid valuutasse vormindada. The Valuutatoru vormindab numbrid vastavalt teie lokaadile. Numbrite vormindamiseks kasutades Valuutatoru, kasutage toru sümbolit, millele järgneb valuuta.

Näiteks:

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

Selles näites on Valuutatoru teisendab numbrimuutuja valuutaks. Vaikimisi on Valuutatoru teisendab muutujad dollariteks. Selle muutmiseks saate konfigureerida Valuutatoru konverteerida teistesse valuutadesse, edastades täiendavaid parameetreid.

Siin on näide:

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

Siin, sa möödud GBP parameetri juurde Valuutatoru. See tagab, et number muutuja teisendab Suurbritannia naelsterlingiks.

DecimalPipe ja PercentPipe

The DecimalPipe teisendab teie numbrid kümnendkohtadeks, samas kui PercentPipe teisendab teie arvud protsentideks.

Et kasutada DecimalPipe, kasutage toru sümbolit, millele järgneb number ja lisaparameetrid. Et kasutada PercentPipe, tehke sama, kuid asendage number koos protsenti ilma täiendavate parameetriteta.

Näiteks:

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

Täiendavad parameetrid edastati DecimalPipe juhtida kuvatavate täis- ja murdarvude arvu. The 1 parameeter määrab, et peaks olema vähemalt üks täisarv. Võrdluseks, 2.3 parameeter määrab, et seal peaks olema vähemalt kaks ja kuni kolm murdarvu.

JsonPipe

The JsonPipe on sisseehitatud toru, mis teisendab andmed JSON-stringivormingusse. Seda kasutatakse peamiselt silumiseks. Võite kasutada JsonPipe nii objektidel kui ka massiividel.

Kasutamise süntaks JsonPipe on järgmine:

{{ expression | json }}

Siin väljendus on andmed, mille soovite teisendada JSON-vormingusse. Toru operaator (|) rakendab JsonPipe väljendile.

Näiteks määrake oma komponendis objekt ja massiiv:

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

Ülaltoodud koodiplokk määratleb a kasutaja objekt ja a profiilid massiivi. Nüüd saate kasutada JsonPipe objekti ja massiivi teisendamiseks JSON-iks.

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

Siin, JsonPipe teisendab kasutaja objekt ja profiilid massiivi JSON-stringiks, mida saate arenduse või silumise ajal oma mallides kiiresti kontrollida.

SlicePipe

The SlicePipe on JavaScriptiga väga sarnane slice () meetod. The SlicePipe vormindab massiive või stringe, ekstraheerides nende elemendid, et luua uusi massiive või stringe.

Et kasutada SlicePipe, kasutate toru sümbolit, millele järgneb viil ja kaks parameetrit, algus- ja lõppindeks. Algusindeks on koht massiivi või stringi kohta, kus toru hakkab elemente eraldama, ja lõpuindeks on koht, kus toru lõpetab elementide eraldamise.

Siin on näide selle kohta, kuidas kasutada SlicePipe:

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

Selles näites on SlicePipe eraldab kaks esimest elementi string muutuja, indeksi 0 element ja indeksi 1 element. Lisaks ekstraheerib see esimesest elemendist massiivi muutuv. The SlicePipe on kasulik, kui soovite mallis kuvada ainult osa andmetest.

AsyncPipe

AsyncPipe on sisseehitatud Angular toru, mis automaatselt tellib ja tühistab vaadeldava või lubaduse. See tagastab vaadeldava või lubaduse viimase väljastatud väärtuse.

Kasutamise süntaks AsyncPipe on järgmine:

{{ expression | async }}

Siin on väljend vaadeldav või lubadus, mille soovite tellida.

Näiteks:

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

Sa võid kasutada AsyncPipe tellida see vaadeldav ja kuvada viimane väljastatud väärtus järgmiselt:

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

See koodiplokk väljastab viimase vaadeldava väljastatud numbri. AsyncPipe on väga kasulik mallides asünkroonsete toimingute käsitlemisel. See tellib automaatselt vaadeldava või lubaduse, kui komponent initsialiseeritakse ja tühistab tellimuse, kui see hävib.

Torude aheldamine nurga all

Saate torusid kokku aheldada, et teha ühes avaldises mitu teisendust. Torude aheldamine on sama lihtne kui arvukate toruoperaatorite (|) kasutamine ühes avaldises. Iga toru väljundist saab järgmise sisend.

Siin on põhiline süntaks:

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

Näiteks saate muuta kuupäevaobjekti stringiks, kasutades DatePipe ja seejärel teisendage see string suurtähtedeks, kasutades nuppu UpperCasePipe.

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

Looge torude abil dünaamilisi rakendusi

Torud on Angulari võimas funktsioon, mis võimaldab teil andmeid enne nende kuvamist teisendada. Siit saate teada erinevate Angulari pakutavate sisseehitatud torude kohta, nagu DatePipe, CurrencyPipe, UpperCasePipe jne. Samuti õppisite, kuidas neid oma rakenduses dünaamilisema sisu loomiseks kasutada. Torude abil saavad arendajad luua paindlikumaid ja dünaamilisemaid veebirakendusi vähema koodiga.