Sveobuhvatni vodič za kutne cijevi

Cijevi u Angularu omogućuju korisnicima transformaciju podataka prije nego što se prikažu u prikazu. Cjevovodi su slični filtrima u drugim programskim jezicima, ali su fleksibilniji i mogu se prilagoditi specifičnim potrebama. Ovdje ćete istražiti kako koristiti cijevi u vašoj Angular aplikaciji.

Što su kutne cijevi?

Kutne cijevi transformatori su podataka koji vašu aplikaciju čine dinamičnijom. Oni uzimaju vrijednost kao ulaz i vraćaju transformiranu vrijednost kao izlaz. Transformacija podataka može biti jednostavna poput formatiranja datuma ili valute ili složena poput filtriranja ili sortiranja popisa stavki.

Možete koristiti cijevi u vašim Angular komponentama i svoje predloške. Cijevi su jednostavne za korištenje, a možete ih vezati za stvaranje složenijih transformacija.

Angular nudi nekoliko ugrađenih cijevi uključujući DatePipe, UpperCasePipe, Mala Cijev, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, i AsyncPipe. Također pruža funkcionalnost za izradu prilagođenih cijevi.

Svaka ugrađena kutna cijev ima jedinstvenu funkciju i može vam pomoći u transformaciji podataka.

DatePipe

The DatePipe formati i prikazi vaše varijable datuma i vremena u određenom formatu, s obzirom na vašu lokalizaciju. Za razliku od drugih okvira koji zahtijevaju JavaScript paketi za formatiranje datuma i vremena, Angular koristi DatePipe. Koristiti DatePipe u svojoj aplikaciji dodajte simbol cijevi (|) nakon čega slijedi datum i sve dodatne parametre.

Na primjer:

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

U ovom primjeru prolazite trenutni datum varijabla kroz DatePipe, koji ga zatim oblikuje prema zadanom formatu datuma. Vi definirate trenutni datum varijablu u TypeScript datoteci vaše komponente.

Evo primjera:

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

Također možete proslijediti dodatne parametre u DatePipe za prilagodbu izlaza:

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

Gore navedeni blok koda prošao je kratkiDatum parametar za DatePipe. Ovo govori DatePipe za formatiranje datuma pomoću kratkog formata datuma. Pored kratkiDatum parametar, možete konfigurirati DatePipe koristeći različite parametre, uključujući z, dugiDatumi prilagođeni formati datuma kao što su dd/MM/GG.

UpperCasePipe i LowerCasePipe

The UpperCasePipe i Mala Cijev transformirajte svoje tekstove. Svoje tekstove pretvarate u velika slova pomoću UpperCasePipe i mala slova pomoću Mala Cijev.

Za korištenje UpperCasePipe i Mala Cijev, dodajte simbol crte (|) nakon čega slijedi mala slova koristiti Mala Cijev ili velika slova koristiti UpperCasePipe.

Ispod je primjer kako koristiti UpperCasePipe i Mala Cijev:

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

CurrencyPipe

Koristiti CurrencyPipe, možete formatirati brojeve u valutu u svojoj aplikaciji. The CurrencyPipe formatira brojeve prema vašoj lokalnoj postavci. Da biste formatirali svoje brojeve pomoću CurrencyPipe, koristite simbol cijevi nakon kojeg slijedi valuta.

Na primjer:

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

U ovom primjeru, CurrencyPipe pretvara varijablu broj u valutu. Prema zadanim postavkama, CurrencyPipe pretvara varijable u dolare. Da biste to promijenili, možete konfigurirati CurrencyPipe za pretvaranje u druge valute prosljeđivanjem dodatnih parametara.

Evo primjera:

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

Evo, prođite GBP parametar za CurrencyPipe. Ovo osigurava da broj varijabla pretvara u valutu Velike Britanije.

DecimalPipe i PercentPipe

The DecimalPipe pretvara vaše brojeve u decimale, dok PercentPipe pretvara vaše brojeve u postotke.

Za korištenje DecimalPipe, koristite simbol cijevi nakon kojeg slijedi broj i dodatne parametre. Za korištenje PercentPipe, učinite isto, ali zamijenite broj s postotak bez dodatnih parametara.

Na primjer:

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

Dodatni parametri proslijeđeni u DecimalPipe kontrolirati broj prikazanih cijelih i razlomaka. The 1 parametar specificira da treba postojati najmanje jedna cijela znamenka. Za usporedbu, 2.3 parametar specificira da treba imati najmanje dvije do tri razlomke.

JsonPipe

The JsonPipe je ugrađeni kanal koji pretvara podatke u JSON format niza. Uglavnom se koristi za otklanjanje pogrešaka. Možete koristiti JsonPipe i na objektima i na nizovima.

Sintaksa za korištenje JsonPipe je kako slijedi:

{{ expression | json }}

Ovdje, izraz su podaci koje želite pretvoriti u JSON format. Operator cijevi (|) primjenjuje JsonPipe do izražaja.

Na primjer, definirajte objekt i polje u svojoj 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;
}

Gore navedeni blok koda definira a korisnik objekt i a profilima niz. Sada možete koristiti JsonPipe za pretvaranje objekta i polja u JSON.

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

Evo, JsonPipe će pretvoriti korisnik objekt i profilima niz u JSON niz, koji možete brzo pregledati u svojim predlošcima tijekom razvoja ili uklanjanja pogrešaka.

SlicePipe

The SlicePipe vrlo je sličan JavaScriptu kriška() metoda. The SlicePipe formatira nizove ili nizove izdvajanjem njihovih elemenata za stvaranje novih nizova ili nizova.

Za korištenje SlicePipe, koristite simbol crte nakon kojeg slijedi kriška i dva parametra, početni i završni indeks. Indeks početka je pozicija u nizu ili nizu gdje će cijev započeti izdvajanje elemenata, a krajnji indeks je mjesto gdje će cijev prestati izdvajati elemente.

Evo primjera kako koristiti SlicePipe:

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

U ovom primjeru, SlicePipe izdvojit će prva dva elementa iz niz varijabla, element s indeksom 0 i element s indeksom 1. Nadalje, izdvojit će prvi element iz niz varijabla. The SlicePipe korisno je kada želite prikazati samo dio podataka u predlošku.

AsyncPipe

AsyncPipe je ugrađeni Angular pipe koji se automatski pretplaćuje i odjavljuje na Observable ili Promise. Vraća posljednju vrijednost koju emitira Observable ili Promise.

Sintaksa za korištenje AsyncPipe je kako slijedi:

{{ expression | async }}

Ovdje je izraz Observable ili Promise na koji se želite pretplatiti.

Na primjer:

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

Možeš koristiti AsyncPipe da se pretplatite na ovaj Observable i prikažete najnoviju emitiranu vrijednost ovako:

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

Ovaj blok koda će ispisati posljednji broj koji emitira Observable. AsyncPipe vrlo je koristan pri rukovanju asinkronim operacijama u vašim predlošcima. Automatski se pretplaćuje na Observable ili Promise kada se komponenta inicijalizira i poništava pretplatu kada se uništi.

Ulančavanje cijevi u kutnom

Možete ulančati cijevi zajedno kako biste izvršili više transformacija u jednom izrazu. Ulančavanje cijevi jednostavno je kao korištenje brojnih operatora cijevi (|) u jednom izrazu. Izlaz svake cijevi postaje ulaz za sljedeću.

Evo osnovne sintakse:

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

Na primjer, možete pretvoriti objekt datuma u niz koristeći DatePipe a zatim taj niz pretvorite u velika slova pomoću UpperCasePipe.

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

Stvorite dinamičke aplikacije pomoću cijevi

Cijevi su moćna značajka u Angularu koja vam omogućuje transformaciju podataka prije nego što se prikažu u prikazu. Ovdje ste naučili o raznim ugrađenim cijevima koje nudi Angular, kao što su DatePipe, CurrencyPipe, UpperCasePipe itd. Također ste naučili kako ih koristiti u svojoj aplikaciji za stvaranje dinamičnijeg sadržaja. Koristeći cijevi, programeri mogu stvoriti fleksibilnije i dinamičnije web aplikacije s manje koda.