Visaptveroša ceļvedis leņķa caurulēm

Leņķiskās caurules ļauj lietotājiem pārveidot datus, pirms tie tiek parādīti skatā. Caurules ir līdzīgas filtriem citās programmēšanas valodās, taču tās ir elastīgākas un var tikt pielāgotas konkrētām vajadzībām. Šeit jūs izpētīsit, kā izmantot caurules savā Angular lietojumprogrammā.

Kas ir leņķiskās caurules?

Leņķiskās caurules ir datu transformatori, kas padara jūsu lietotni dinamiskāku. Viņi izmanto vērtību kā ievadi un atgriež pārveidoto vērtību kā izvadi. Datu pārveidošana var būt tikpat vienkārša kā datuma vai valūtas formatēšana vai tikpat sarežģīta kā vienumu saraksta filtrēšana vai kārtošana.

Jūs varat izmantot caurules jūsu Angular komponentos un jūsu veidnes. Caurules ir viegli lietojamas, un tās var savienot ķēdē, lai izveidotu sarežģītākas transformācijas.

Angular nodrošina vairākas iebūvētas caurules, tostarp DatePipe, UpperCasePipe, LowerCasePipe, Valūtas caurule, DecimalPipe, PercentPipe

, JsonPipe, SlicePipe, un AsyncPipe. Tas nodrošina arī funkcionalitāti pielāgotu cauruļu izveidei.

Katra iebūvētā Angular caurule veic unikālu funkciju un var palīdzēt pārveidot datus.

DatePipe

The DatePipe formāti un displeji jūsu datuma un laika mainīgie noteiktā formātā, ņemot vērā jūsu atrašanās vietu. Atšķirībā no citiem ietvariem, kuriem nepieciešams JavaScript pakotnes datuma un laika formatēšanai, Angular izmanto DatePipe. Izmantot DatePipe savā pieteikumā pievienojiet caurules simbolu (|), kam seko datums un jebkuri papildu parametri.

Piemēram:

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

Šajā piemērā jūs izturat Šodienas datums mainīgs, izmantojot DatePipe, kas pēc tam formatē to atbilstoši noklusējuma datuma formātam. Jūs definējat Šodienas datums mainīgais jūsu komponenta TypeScript failā.

Šeit ir piemērs:

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

Varat arī nodot papildu parametrus DatePipe lai pielāgotu izvadi:

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

Iepriekš esošais koda bloks izturēja shortDate parametru uz DatePipe. Tas stāsta par DatePipe lai formatētu datumu, izmantojot īso datuma formātu. Līdzās shortDate parametru, varat konfigurēt DatePipe izmantojot dažādus parametrus, t.sk z, longDateun pielāgotus datuma formātus, piemēram, dd/MM/GG.

UpperCasePipe un LowerCasePipe

The UpperCasePipe un LowerCasePipe pārveidot savus tekstus. Jūs pārveidojat savus tekstus uz lielajiem burtiem, izmantojot UpperCasePipe un mazos burtus, izmantojot LowerCasePipe.

Lai izmantotu UpperCasePipe un LowerCasePipe, pievienojiet caurules simbolu (|), kam seko mazie burti lai izmantotu LowerCasePipe vai lielie burti lai izmantotu UpperCasePipe.

Tālāk ir sniegts piemērs, kā lietot UpperCasePipe un LowerCasePipe:

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

Valūtas caurule

Izmantojot Valūtas caurule, savā lietojumprogrammā varat formatēt skaitļus valūtā. The Valūtas caurule formatē skaitļus atbilstoši jūsu lokalizācijai. Lai formatētu skaitļus, izmantojot Valūtas caurule, izmantojiet caurules simbolu, kam seko valūta.

Piemēram:

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

Šajā piemērā Valūtas caurule konvertē skaitļa mainīgo valūtā. Pēc noklusējuma Valūtas caurule pārvērš mainīgos lielumus dolāros. Lai to mainītu, varat konfigurēt Valūtas caurule konvertēt uz citām valūtām, nododot papildu parametrus.

Šeit ir piemērs:

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

Lūk, jūs šķērsojat GBP parametru uz Valūtas caurule. Tas nodrošina, ka numuru mainīgais konvertē Lielbritānijas mārciņas valūtā.

DecimalPipe un PercentPipe

The DecimalPipe pārveido jūsu skaitļus decimāldaļās, savukārt PercentPipe pārvērš jūsu skaitļus procentos.

Lai izmantotu DecimalPipe, izmantojiet caurules simbolu, kam seko numuru un papildu parametri. Lai izmantotu PercentPipe, dariet to pašu, bet nomainiet numuru ar procentiem bez papildu parametriem.

Piemēram:

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

Papildu parametri tika nodoti DecimalPipe kontrolēt parādīto veselo skaitļu un daļskaitļu skaitu. The 1 parametrs norāda, ka jābūt vismaz vienam veselam skaitlim. Salīdzinājumam, 2.3 parametrs norāda, ka jābūt vismaz diviem un līdz trim cipariem.

JsonPipe

The JsonPipe ir iebūvēta caurule, kas pārvērš datus JSON virknes formātā. To galvenokārt izmanto atkļūdošanas nolūkos. Jūs varat izmantot JsonPipe gan objektos, gan masīvos.

Sintakse izmantošanai JsonPipe ir šāds:

{{ expression | json }}

Šeit, izteiksme ir dati, kurus vēlaties konvertēt JSON formātā. Caurules operators (|) piemēro JsonPipe uz izteiksmi.

Piemēram, komponentā definējiet objektu un masīvu:

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

Iepriekš minētais koda bloks definē a lietotājs objekts un a profili masīvs. Tagad jūs varat izmantot JsonPipe lai pārvērstu objektu un masīvu par JSON.

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

Lūk, JsonPipe konvertēs lietotājs objekts un profili masīvu JSON virknē, kuru izstrādes vai atkļūdošanas laikā varat ātri pārbaudīt savās veidnēs.

SlicePipe

The SlicePipe ir ļoti līdzīgs JavaScript šķēle () metodi. The SlicePipe formatē masīvus vai virknes, izvelkot to elementus, lai izveidotu jaunus masīvus vai virknes.

Lai izmantotu SlicePipe, jūs izmantojat caurules simbolu, kam seko šķēle un divi parametri, sākuma un beigu indeksi. Sākuma indekss ir vieta masīvā vai virknē, kur caurule sāks izvilkt elementus, un beigu indekss ir vieta, kur caurule pārtrauks elementu ieguvi.

Šeit ir piemērs, kā izmantot SlicePipe:

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

Šajā piemērā SlicePipe izvilks pirmos divus elementus no virkne mainīgais, elements ar indeksu 0 un elements ar indeksu 1. Turklāt tas izvilks pirmo elementu no masīvs mainīgs. The SlicePipe ir noderīga, ja vēlaties veidnē parādīt tikai daļu datu.

AsyncPipe

AsyncPipe ir iebūvēta Angular caurule, kas automātiski abonē un anulē novērojamo vai solījumu. Tas atgriež pēdējo vērtību, ko emitē Novērojamais vai Solījums.

Sintakse lietošanai AsyncPipe ir šāds:

{{ expression | async }}

Šeit izteiciens ir novērojams vai solījums, kuru vēlaties abonēt.

Piemēram:

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

Tu vari izmantot AsyncPipe lai abonētu šo novērojamo un parādītu jaunāko emitēto vērtību, piemēram:

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

Šis koda bloks izvadīs pēdējo numuru, ko izstaro Novērojamais. AsyncPipe ir ļoti noderīga, apstrādājot asinhronās darbības jūsu veidnēs. Tas automātiski abonē Observable vai Promise, kad komponents tiek inicializēts, un anulējas, kad tas tiek iznīcināts.

Cauruļu ķēdēšana leņķiskā veidā

Varat savienot caurules, lai veiktu vairākas transformācijas vienā izteiksmē. Cauruļu ķēdēšana ir tikpat vienkārša kā vairāku cauruļu operatoru (|) izmantošana vienā izteiksmē. Katras caurules izvade kļūst par nākamās caurules ievadi.

Šeit ir pamata sintakse:

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

Piemēram, datuma objektu var pārveidot par virkni, izmantojot DatePipe un pēc tam konvertējiet šo virkni uz lielajiem burtiem, izmantojot UpperCasePipe.

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

Izveidojiet dinamiskas lietojumprogrammas, izmantojot caurules

Caurules ir spēcīgs Angular līdzeklis, kas ļauj pārveidot datus, pirms tie tiek parādīti skatā. Šeit jūs uzzinājāt par dažādām Angular piedāvātajām iebūvētajām caurulēm, piemēram, DatePipe, CurrencyPipe, UpperCasePipe utt. Jūs arī uzzinājāt, kā tos izmantot savā lietojumprogrammā, lai izveidotu dinamiskāku saturu. Izmantojot caurules, izstrādātāji var izveidot elastīgākas un dinamiskākas tīmekļa lietojumprogrammas ar mazāku kodu.