Išsamus kampinių vamzdžių vadovas

Kampiniai vamzdžiai leidžia vartotojams transformuoti duomenis prieš juos pateikiant rodinyje. Vamzdžiai yra panašūs į filtrus kitose programavimo kalbose, tačiau yra lankstesni ir gali būti pritaikyti pagal specifinius poreikius. Čia sužinosite, kaip naudoti vamzdžius savo kampinėje programoje.

Kas yra kampiniai vamzdžiai?

Kampiniai vamzdžiai yra duomenų transformatoriai, kurie daro jūsų programą dinamiškesnę. Jie priima reikšmę kaip įvestį ir grąžina transformuotą vertę kaip išvestį. Duomenų transformavimas gali būti toks paprastas kaip datos ar valiutos formatavimas arba toks sudėtingas kaip elementų sąrašo filtravimas ar rūšiavimas.

Galite naudoti vamzdžius kampiniuose komponentuose ir jūsų šablonai. Vamzdžius lengva naudoti ir galite juos sujungti, kad sukurtumėte sudėtingesnes transformacijas.

Angular siūlo keletą įmontuotų vamzdžių, įskaitant DatePipe, UpperCasePipe, Mažosios raidės vamzdis, Valiutos vamzdis

, Dešimtainis vamzdis, PercentPipe, JsonPipe, SlicePipe, ir AsyncPipe. Tai taip pat suteikia galimybę kurti pasirinktinius vamzdžius.

Kiekvienas įmontuotas kampinis vamzdis atlieka unikalią funkciją ir gali padėti transformuoti duomenis.

DatePipe

The DatePipe formatai ir ekranai jūsų datos ir laiko kintamieji nurodytu formatu, atsižvelgiant į jūsų lokalę. Skirtingai nuo kitų karkasų, kuriems reikia JavaScript paketai formatuoti datą ir laiką, Angular naudoja DatePipe. Naudoti DatePipe savo programoje pridėkite vamzdžio simbolį (|), po kurio eina data ir bet kokie papildomi parametrai.

Pavyzdžiui:

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

Šiame pavyzdyje jūs išlaikote dabartinė data kintamasis per DatePipe, kuri vėliau ją suformatuoja pagal numatytąjį datos formatą. Jūs apibrėžiate dabartinė data kintamąjį komponento TypeScript faile.

Štai pavyzdys:

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

Taip pat galite perduoti papildomus parametrus DatePipe norėdami tinkinti išvestį:

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

Aukščiau esantis kodo blokas praėjo shortDate parametras į DatePipe. Tai pasakoja DatePipe Norėdami suformatuoti datą naudodami trumpą datos formatą. Kartu su shortDate parametrą, galite konfigūruoti DatePipe naudojant įvairius parametrus, įskaitant z, longDateir pasirinktinius datos formatus, pvz., dd/MM/MM.

UpperCasePipe ir LowerCasePipe

The UpperCasePipe ir Mažosios raidės vamzdis pakeisti savo tekstus. Jūs pakeičiate savo tekstus į didžiąsias raides naudodami UpperCasePipe ir mažosiomis raidėmis naudodami Mažosios raidės vamzdis.

Norėdami naudoti UpperCasePipe ir Mažosios raidės vamzdis, pridėkite vamzdžio simbolį (|) ir po jo mažosios raidės naudoti Mažosios raidės vamzdis arba didžiosiomis raidėmis naudoti UpperCasePipe.

Žemiau pateikiamas pavyzdys, kaip naudoti UpperCasePipe ir Mažosios raidės vamzdis:

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

Valiutos vamzdis

Naudojant Valiutos vamzdis, galite formatuoti skaičius pagal valiutą savo programoje. The Valiutos vamzdis formatuoja skaičius pagal jūsų lokalę. Norėdami suformatuoti skaičius naudodami Valiutos vamzdis, naudokite vamzdžio simbolį, po kurio einate valiuta.

Pavyzdžiui:

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

Šiame pavyzdyje Valiutos vamzdis konvertuoja skaičių kintamąjį į valiutą. Pagal numatytuosius nustatymus, Valiutos vamzdis kintamuosius konvertuoja į dolerius. Norėdami tai pakeisti, galite sukonfigūruoti Valiutos vamzdis konvertuoti į kitas valiutas perduodant papildomus parametrus.

Štai pavyzdys:

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

Štai jūs praeinate GBP parametras į Valiutos vamzdis. Tai užtikrina, kad numerį kintamasis konvertuojamas į Didžiosios Britanijos svarų valiutą.

DecimalPipe ir PercentPipe

The Dešimtainis vamzdis paverčia jūsų skaičius po kablelio, o PercentPipe konvertuoja jūsų skaičius į procentus.

Norėdami naudoti Dešimtainis vamzdis, naudokite vamzdžio simbolį, po kurio einate numerį ir papildomi parametrai. Norėdami naudoti PercentPipe, atlikite tą patį, bet pakeiskite numerį su procentų be jokių papildomų parametrų.

Pavyzdžiui:

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

Papildomi parametrai perduoti Dešimtainis vamzdis valdyti rodomų sveikųjų ir trupmeninių skaičių skaičių. The 1 parametras nurodo, kad turi būti bent vienas sveikasis skaitmuo. Palyginimui, 2.3 parametras nurodo, kad turi būti bent du ir ne daugiau kaip trys trupmeniniai skaitmenys.

JsonPipe

The JsonPipe yra įmontuotas vamzdis, konvertuojantis duomenis į JSON eilutės formatą. Jis daugiausia naudojamas derinimo tikslais. Galite naudoti JsonPipe tiek objektuose, tiek masyvuose.

Naudojimo sintaksė JsonPipe yra taip:

{{ expression | json }}

Čia išraiška yra duomenys, kuriuos norite konvertuoti į JSON formatą. Vamzdžių operatorius (|) taiko JsonPipe į išraišką.

Pavyzdžiui, apibrėžkite objektą ir masyvą savo komponente:

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

Aukščiau pateiktas kodo blokas apibrėžia a Vartotojas objektas ir a profiliai masyvas. Dabar galite naudoti JsonPipe konvertuoti objektą ir masyvą į JSON.

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

Čia, JsonPipe konvertuos Vartotojas objektas ir profiliai masyvą į JSON eilutę, kurią galite greitai patikrinti savo šablonuose kurdami arba derindami.

SlicePipe

The SlicePipe yra labai panašus į JavaScript gabalas () metodas. The SlicePipe formatuoja masyvus arba eilutes, ištraukdami jų elementus, kad sukurtų naujus masyvus arba eilutes.

Norėdami naudoti SlicePipe, naudojate vamzdžio simbolį, po kurio einate gabalas ir du parametrai – pradžios ir pabaigos indeksai. Pradžios indeksas yra vieta masyve arba eilutėje, kurioje vamzdis pradės išskirti elementus, o pabaigos indeksas yra vieta, kur vamzdis nustos išgauti elementus.

Čia yra pavyzdys, kaip naudoti SlicePipe:

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

Šiame pavyzdyje SlicePipe išskirs pirmuosius du elementus iš styga kintamasis, elementas, kurio indeksas 0, ir elementas, kurio indeksas 1. Be to, jis ištrauks pirmąjį elementą iš masyvas kintamasis. The SlicePipe yra naudinga, kai šablone norite rodyti tik dalį duomenų.

AsyncPipe

AsyncPipe yra įmontuotas kampinis vamzdis, kuris automatiškai užsiregistruoja ir atsisako stebimo ar pažado. Jis grąžina naujausią vertę, kurią išleido Stebimasis arba Pažadas.

Naudojimo sintaksė AsyncPipe yra taip:

{{ expression | async }}

Čia išraiška yra stebimasis arba pažadas, kurį norite užsiprenumeruoti.

Pavyzdžiui:

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

Tu gali naudoti AsyncPipe Norėdami užsiprenumeruoti šį Stebimą ir rodyti naujausią skleidžiamą vertę, pavyzdžiui:

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

Šis kodo blokas išves naujausią skaičių, kurį išspindi stebimasis. AsyncPipe yra labai naudinga tvarkant asinchronines operacijas savo šablonuose. Jis automatiškai užsiprenumeruoja elementą Observable arba Promise, kai komponentas inicijuojamas, ir atšaukia prenumeratą, kai jis sunaikinamas.

Vamzdžių sujungimas kampiniu būdu

Galite sujungti vamzdžius, kad atliktumėte kelias transformacijas vienoje išraiškoje. Vamzdžių sujungimas grandinėmis yra taip paprasta, kaip naudojant daugybę vamzdžių operatorių (|) vienoje išraiškoje. Kiekvieno vamzdžio išvestis tampa kito vamzdžio įvestimi.

Štai pagrindinė sintaksė:

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

Pavyzdžiui, datos objektą galite paversti eilute naudodami DatePipe tada konvertuokite šią eilutę į didžiąsias raides naudodami UpperCasePipe.

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

Kurkite dinamines programas naudodami vamzdžius

Vamzdžiai yra galinga „Angular“ funkcija, leidžianti transformuoti duomenis, kol jie nebus rodomi rodinyje. Čia sužinojote apie įvairius Angular siūlomus įmontuojamus vamzdžius, tokius kaip DatePipe, CurrencyPipe, UpperCasePipe ir kt. Taip pat sužinojote, kaip juos naudoti savo programoje, kad sukurtumėte dinamiškesnį turinį. Naudodami vamzdžius, kūrėjai gali sukurti lankstesnes ir dinamiškesnes žiniatinklio programas naudodami mažiau kodo.