Uľahčite transformáciu údajov v Angular aplikáciách pomocou Angular potrubí.
Potrubia v Angular umožňujú používateľom transformovať údaje predtým, ako sa zobrazia v zobrazení. Potrubia sú podobné filtrom v iných programovacích jazykoch, ale sú flexibilnejšie a dajú sa prispôsobiť špecifickým potrebám. Tu sa dozviete, ako používať rúry vo vašej aplikácii Angular.
Čo sú rúry v uhlovom?
Uhlové potrubia sú dátové transformátory, vďaka ktorým je vaša aplikácia dynamickejšia. Berú hodnotu ako vstup a vracajú transformovanú hodnotu ako výstup. Transformácia údajov môže byť taká jednoduchá ako formátovanie dátumu alebo meny alebo taká zložitá ako filtrovanie alebo triedenie zoznamu položiek.
Môžete použiť potrubia vo vašich komponentoch Angular a vaše šablóny. Rúry sa ľahko používajú a môžete ich reťaziť, aby ste vytvorili zložitejšie transformácie.
Angular poskytuje niekoľko vstavaných potrubí vrátane DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, a AsyncPipe. Poskytuje tiež funkcie na vytváranie vlastných potrubí.
Každé vstavané uhlové potrubie plní jedinečnú funkciu a môže vám pomôcť transformovať dáta.
DatePipe
The DatePipe formáty a zobrazenia vaše premenné dátumu a času v špecifikovanom formáte s ohľadom na vaše miestne nastavenie. Na rozdiel od iných rámcov, ktoré vyžadujú Balíky JavaScript na formátovanie dátumu a času, Angular používa DatePipe. Použit DatePipe vo svojej aplikácii pridajte symbol potrubia (|), za ktorým nasleduje dátum a akékoľvek ďalšie parametre.
Napríklad:
<p>Today's date is {{ currentDate | date }}p>
V tomto príklade prejdete aktuálny dátum premenná cez DatePipe, ktorý ho potom naformátuje podľa predvoleného formátu dátumu. Vy definujete aktuálny dátum premennej v súbore TypeScript vášho komponentu.
Tu je príklad:
import { Component } from'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
currentDate: any = newDate();
}
Môžete tiež odovzdať ďalšie parametre DatePipe na prispôsobenie výstupu:
<p>Today's date is {{ currentDate | date:'shortDate' }}p>
Vyššie uvedený blok kódu prešiel cez krátky dátum parameter k DatePipe. Toto hovorí o DatePipe na formátovanie dátumu pomocou formátu krátkeho dátumu. Popri tom krátky dátum parameter, môžete nakonfigurovať DatePipe pomocou rôznych parametrov, napr z, longDatea vlastné formáty dátumu, ako napr dd/MM/RR.
UpperCasePipe a LowerCasePipe
The UpperCasePipe a LowerCasePipe transformovať svoje texty. Svoje texty transformujete na veľké písmená pomocou UpperCasePipe a malé písmená pomocou LowerCasePipe.
Ak chcete použiť UpperCasePipe a LowerCasePipe, pridajte symbol zvislej čiary (|), za ktorým nasleduje malými písmenami použiť LowerCasePipe alebo veľké písmená použiť UpperCasePipe.
Nižšie je uvedený príklad, ako použiť UpperCasePipe a LowerCasePipe:
<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>
CurrencyPipe
Pomocou CurrencyPipe, môžete vo svojej aplikácii formátovať čísla na menu. The CurrencyPipe formátuje čísla podľa vášho miestneho nastavenia. Ak chcete naformátovať svoje čísla pomocou CurrencyPipe, použite symbol potrubia, za ktorým nasleduje mena.
Napríklad:
<p>{{ number | currency }}p>
V tomto príklade CurrencyPipe prevedie číselnú premennú na menu. V predvolenom nastavení je CurrencyPipe konvertuje premenné na doláre. Ak to chcete zmeniť, môžete nakonfigurovať CurrencyPipe previesť na iné meny zadaním ďalších parametrov.
Tu je príklad:
<p>{{ number | currency: 'GBP' }}p>
Tu prejdete GBP parameter k CurrencyPipe. Tým sa zabezpečí, že číslo premenná sa prevádza na menu Veľkej Británie.
DecimalPipe a PercentPipe
The DecimalPipe transformuje vaše čísla na desatinné miesta, zatiaľ čo PercentPipe prevedie vaše čísla na percentá.
Ak chcete použiť DecimalPipe, použite symbol potrubia, za ktorým nasleduje číslo a ďalšie parametre. Ak chcete použiť PercentPipe, urobte to isté, ale nahraďte číslo s percent bez dodatočných parametrov.
Napríklad:
<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>
Dodatočné parametre odovzdané do DecimalPipe ovládať počet zobrazených celých a zlomkových číslic. The 1 parameter určuje, že by malo existovať aspoň jedno celé číslo. V porovnaní s 2.3 parameter určuje, že by mali byť aspoň dve a maximálne tri desatinné číslice.
JsonPipe
The JsonPipe je vstavaný kanál, ktorý konvertuje údaje do formátu reťazca JSON. Používa sa hlavne na účely ladenia. Môžete použiť JsonPipe na objektoch aj poliach.
Syntax pre použitie JsonPipe je nasledujúca:
{{ expression | json }}
Tu, výraz sú údaje, ktoré chcete previesť do formátu JSON. Operátor potrubia (|) použije JsonPipe k výrazu.
Napríklad definujte objekt a pole vo svojom 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;
}
Vyššie uvedený blok kódu definuje a užívateľ objekt a a profilov pole. Teraz môžete použiť JsonPipe na konverziu objektu a poľa na JSON.
<p>{{ user | json}}p>
<p>{{ profiles | json}}p>
Tu, JsonPipe prevedie užívateľ objekt a profilov pole do reťazca JSON, ktorý môžete rýchlo skontrolovať vo svojich šablónach počas vývoja alebo ladenia.
SlicePipe
The SlicePipe je veľmi podobný JavaScriptu plátok () metóda. The SlicePipe formátuje polia alebo reťazce extrahovaním ich prvkov na vytvorenie nových polí alebo reťazcov.
Ak chcete použiť SlicePipe, použijete symbol potrubia, za ktorým nasleduje plátok a dva parametre, počiatočný a koncový index. Počiatočný index je pozícia v poli alebo reťazci, kde potrubie začne extrahovať prvky, a koncový index je miesto, kde potrubie zastaví extrahovanie prvkov.
Tu je príklad, ako použiť SlicePipe:
<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>
V tomto príklade SlicePipe vytiahne prvé dva prvky z reťazec premenná, prvok na indexe 0 a prvok na indexe 1. Ďalej bude extrahovať prvý prvok z pole premenlivý. The SlicePipe je užitočné, keď chcete v šablóne zobraziť iba časť údajov.
AsyncPipe
AsyncPipe je vstavaná uhlová fajka, ktorá automaticky prihlasuje a odhlasuje odber Observable alebo Promise. Vracia poslednú hodnotu vydanú pozorovateľným alebo prísľubom.
Syntax na použitie AsyncPipe je nasledujúca:
{{ expression | async }}
Tu je výraz Pozorovateľný alebo Promis, na odber ktorého sa chcete prihlásiť.
Napríklad:
let numbers = of(1, 2, 3, 4, 5);
Môžeš použiť AsyncPipe ak sa chcete prihlásiť na odber tohto pozorovateľného prvku a zobraziť najnovšiu emitovanú hodnotu takto:
<p>{{ numbers | async }}p>
Tento blok kódu vypíše posledné číslo vydané pozorovateľným. AsyncPipe je veľmi užitočný pri manipulácii s asynchrónnymi operáciami vo vašich šablónach. Automaticky sa prihlási k odberu Observable alebo Promise, keď sa komponent inicializuje a odhlási, keď sa zničí.
Reťazové rúry v uhlovom prevedení
Zreťazením potrubia môžete vykonať viacero transformácií v jednom výraze. Reťazenie rúr je také jednoduché, ako použitie viacerých operátorov rúr (|) v jedinom výraze. Výstup každého potrubia sa stáva vstupom pre ďalšie potrubie.
Tu je základná syntax:
<p>{{ expression | pipe1 | pipe2 |... }}p>
Napríklad môžete transformovať objekt dátumu na reťazec pomocou DatePipe a potom skonvertujte tento reťazec na veľké písmená pomocou UpperCasePipe.
<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>
Vytvárajte dynamické aplikácie pomocou potrubí
Rúry sú výkonnou funkciou v Angular, ktorá vám umožňuje transformovať údaje predtým, ako sa zobrazia v zobrazení. Tu ste sa dozvedeli o rôznych vstavaných potrubiach, ktoré Angular ponúka, ako napríklad DatePipe, CurrencyPipe, UpperCasePipe atď. Tiež ste sa naučili, ako ich používať vo svojej aplikácii na vytváranie dynamickejšieho obsahu. Pomocou kanálov môžu vývojári vytvárať flexibilnejšie a dynamickejšie webové aplikácie s menším množstvom kódu.