Un ghid cuprinzător pentru țevi în unghiular

Tuburile din Angular permit utilizatorilor să transforme datele înainte ca acestea să fie afișate în vizualizare. Țevile sunt similare cu filtrele din alte limbaje de programare, dar sunt mai flexibile și pot fi personalizate pentru a răspunde nevoilor specifice. Aici, veți explora cum să utilizați conductele în aplicația dvs. Angular.

Ce sunt țevile în unghiular?

Conductele unghiulare sunt transformatoare de date care fac aplicația dvs. mai dinamică. Ei iau o valoare ca intrare și returnează o valoare transformată ca ieșire. Transformarea datelor poate fi la fel de simplă ca formatarea unei date sau a unei monede sau la fel de complexă ca filtrarea sau sortarea unei liste de elemente.

Puteți folosi țevile în componentele dvs. unghiulare și șabloanele dvs. Conductele sunt ușor de utilizat și le puteți înlănțui pentru a crea transformări mai complexe.

Angular oferă mai multe țevi încorporate, inclusiv DatePipe

, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, și AsyncPipe. De asemenea, oferă funcționalitatea de a crea conducte personalizate.

Fiecare conductă Angular încorporată îndeplinește o funcție unică și vă poate ajuta să transformați datele.

DatePipe

The DatePipe formate și afișaje variabilele dvs. de dată și oră într-un format specificat, având în vedere localitatea dvs. Spre deosebire de alte cadre care necesită Pachete JavaScript pentru a formata data și ora, Angular folosește DatePipe. A folosi DatePipe în aplicația dvs., adăugați simbolul conductei (|) urmat de Data și orice parametri suplimentari.

De exemplu:

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

În acest exemplu, treceți data curenta variabilă prin intermediul DatePipe, care apoi îl formatează conform formatului implicit de dată. Tu definești data curenta variabilă în fișierul TypeScript al componentei dvs.

Iată un exemplu:

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

De asemenea, puteți transmite parametri suplimentari DatePipe pentru a personaliza ieșirea:

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

Blocul de cod de mai sus a trecut shortDate parametru la DatePipe. Aceasta spune DatePipe pentru a formata data folosind formatul de dată scurtă. Alături de shortDate parametrul, puteți configura DatePipe folosind diferiți parametri, inclusiv z, longDate, și formate personalizate de dată, cum ar fi zz/LL/AA.

UpperCasePipe și LowerCasePipe

The UpperCasePipe și LowerCasePipe transformă-ți textele. Îți transformi textele în majuscule folosind UpperCasePipe și litere mici folosind LowerCasePipe.

Pentru a utiliza UpperCasePipe și LowerCasePipe, adăugați simbolul țevii (|) urmat de litere mici a folosi LowerCasePipe sau majuscule a folosi UpperCasePipe.

Mai jos este un exemplu de utilizare a UpperCasePipe și LowerCasePipe:

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

CurrencyPipe

Folosind CurrencyPipe, puteți formata numerele într-o monedă în aplicația dvs. The CurrencyPipe formatează numerele în funcție de localitatea dvs. Pentru a vă formata numerele folosind CurrencyPipe, utilizați simbolul țevii urmat de valută.

De exemplu:

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

În acest exemplu, CurrencyPipe convertește variabila numerică într-o monedă. În mod implicit, CurrencyPipe convertește variabilele în dolari. Pentru a schimba acest lucru, puteți configura CurrencyPipe pentru a converti în alte monede prin trecerea unor parametri suplimentari.

Iată un exemplu:

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

Aici, treci GBP parametru la CurrencyPipe. Acest lucru asigură că număr variabila se convertește în moneda liră britanică.

DecimalPipe și PercentPipe

The DecimalPipe transformă numerele în zecimale, în timp ce PercentPipe transformă numerele dvs. în procente.

Pentru a utiliza DecimalPipe, utilizați simbolul țevii urmat de număr și parametri suplimentari. Pentru a utiliza PercentPipe, faceți același lucru, dar înlocuiți număr cu la sută fără parametri suplimentari.

De exemplu:

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

Parametrii suplimentari trecuți către DecimalPipe controlați numărul de cifre întregi și fracționale afișate. The 1 parametrul specifică că ar trebui să existe cel puțin o cifră întreagă. În comparație, cel 2.3 parametrul specifică că ar trebui să existe cel puțin două și până la trei cifre fracționale.

JsonPipe

The JsonPipe este o conductă încorporată care convertește datele într-un format de șir JSON. Este folosit în principal în scopuri de depanare. Puteți folosi JsonPipe atât pe obiecte, cât și pe matrice.

Sintaxa pentru utilizarea JsonPipe este după cum urmează:

{{ expression | json }}

Aici, expresie sunt datele pe care doriți să le convertiți în format JSON. Operatorul de conducte (|) aplică JsonPipe la expresie.

De exemplu, definiți un obiect și o matrice în componenta dvs.:

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

Blocul de cod de mai sus definește a utilizator obiect și a profiluri matrice. Acum, puteți utiliza JsonPipe pentru a converti obiectul și matricea în JSON.

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

Aici JsonPipe va converti utilizator obiect şi cel profiluri matrice într-un șir JSON, pe care îl puteți inspecta rapid în șabloanele dvs. în timpul dezvoltării sau depanării.

SlicePipe

The SlicePipe este foarte asemănător cu JavaScript felie() metodă. The SlicePipe formatează matrice sau șiruri de caractere prin extragerea elementelor acestora pentru a crea matrice sau șiruri noi.

Pentru a utiliza SlicePipe, utilizați simbolul conductei urmat de felie și doi parametri, indicii de început și de sfârșit. Indicele de început este poziția din matrice sau șir în care conducta va începe extragerea elementelor, iar indicele de final este locul în care conducta va opri extragerea elementelor.

Iată un exemplu despre cum se utilizează SlicePipe:

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

În acest exemplu, SlicePipe va extrage primele două elemente din şir variabilă, elementul la indicele 0 și elementul la indicele 1. În plus, va extrage primul element din matrice variabil. The SlicePipe este util atunci când doriți să afișați doar o parte a datelor în șablon.

AsyncPipe

AsyncPipe este o conductă Angular încorporată care se abonează și se dezabonează automat la un Observable sau Promise. Returnează cea mai recentă valoare emisă de Observabil sau Promise.

Sintaxa de utilizare AsyncPipe este după cum urmează:

{{ expression | async }}

Aici, expresia este Observabilul sau Promisiunea la care doriți să vă abonați.

De exemplu:

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

Poți să folosești AsyncPipe pentru a vă abona la acest Observable și pentru a afișa cea mai recentă valoare emisă astfel:

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

Acest bloc de cod va scoate cel mai recent număr emis de Observable. AsyncPipe este foarte util atunci când gestionați operațiuni asincrone în șabloanele dvs. Se abonează automat la Observable sau Promise atunci când componenta se inițializează și se dezabonează atunci când este distrusă.

Înlănțuirea țevilor în unghiular

Puteți lega conducte împreună pentru a efectua mai multe transformări într-o singură expresie. Înlănțuirea țevilor este la fel de simplă ca utilizarea a numeroși operatori de țevi (|) într-o singură expresie. Ieșirea fiecărei țevi devine intrarea pentru următoarea.

Iată sintaxa de bază:

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

De exemplu, puteți transforma un obiect dată într-un șir folosind DatePipe și apoi convertiți acel șir în majuscule folosind UpperCasePipe.

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

Creați aplicații dinamice folosind conducte

Conductele sunt o caracteristică puternică în Angular, care vă permite să transformați datele înainte ca acestea să fie afișate în vizualizare. Aici, ați aflat despre diferitele conducte încorporate oferite de Angular, cum ar fi DatePipe, CurrencyPipe, UpperCasePipe etc. De asemenea, ați învățat cum să le utilizați în aplicația dvs. pentru a crea conținut mai dinamic. Folosind conducte, dezvoltatorii pot crea aplicații web mai flexibile și mai dinamice cu mai puțin cod.