Usnadněte si transformaci dat v Angular aplikacích pomocí Angular potrubí.
Potrubí v Angular umožňuje uživatelům transformovat data před jejich zobrazením v pohledu. Trubky jsou podobné filtrům v jiných programovacích jazycích, ale jsou flexibilnější a lze je přizpůsobit konkrétním potřebám. Zde prozkoumáte, jak používat trubky ve vaší aplikaci Angular.
Co jsou trubky v Angular?
Angular pipes jsou datové transformátory, díky kterým je vaše aplikace dynamičtější. Berou hodnotu jako vstup a vracejí transformovanou hodnotu jako výstup. Transformace dat může být tak jednoduchá, jako je formátování data nebo měny, nebo tak složitá, jako je filtrování nebo řazení seznamu položek.
Můžete použít trubky ve vašich Angular součástech a vaše šablony. Trubky se snadno používají a můžete je zřetězit a vytvořit tak složitější transformace.
Angular poskytuje několik vestavěných trubek včetně DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, a AsyncPipe. Poskytuje také funkce pro vytváření vlastních potrubí.
Každé vestavěné Angular potrubí plní jedinečnou funkci a může vám pomoci transformovat data.
DatePipe
The DatePipe formáty a displeje vaše proměnné data a času ve specifikovaném formátu s ohledem na vaše národní prostředí. Na rozdíl od jiných rámců, které vyžadují JavaScript balíčky pro formátování data a času, Angular používá DatePipe. Použít DatePipe ve své aplikaci přidejte symbol svislé čáry (|) a za ním datum a případné další parametry.
Například:
<p>Today's date is {{ currentDate | date }}p>
V tomto příkladu předáte dnešní datum proměnná prostřednictvím DatePipe, který jej poté naformátuje podle výchozího formátu data. Vy definujete dnešní datum proměnná v souboru TypeScript vaší komponenty.
Zde je pří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 také předat další parametry DatePipe pro přizpůsobení výstupu:
<p>Today's date is {{ currentDate | date:'shortDate' }}p>
Blok kódu výše prošel shortDate parametr k DatePipe. Toto říká DatePipe pro formátování data pomocí formátu krátkého data. Vedle shortDate parametr, můžete nakonfigurovat DatePipe pomocí různých parametrů, vč z, longDatea vlastní formáty data jako např dd/MM/RR.
UpperCasePipe a LowerCasePipe
The UpperCasePipe a LowerCasePipe transformovat své texty. Své texty převedete na velká písmena pomocí UpperCasePipe a malými písmeny pomocí LowerCasePipe.
Chcete-li použít UpperCasePipe a LowerCasePipe, přidejte symbol čáry (|) následovaný malá písmena používat LowerCasePipe nebo velká písmena používat UpperCasePipe.
Níže je uveden příklad, jak použít UpperCasePipe a LowerCasePipe:
<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>
CurrencyPipe
Za použití CurrencyPipe, můžete ve své aplikaci formátovat čísla na měnu. The CurrencyPipe formátuje čísla podle vašeho národního prostředí. Pro formátování čísel pomocí CurrencyPipe, použijte symbol potrubí následovaný měna.
Například:
<p>{{ number | currency }}p>
V tomto příkladu je CurrencyPipe převede číselnou proměnnou na měnu. Ve výchozím nastavení je CurrencyPipe převádí proměnné na dolary. Chcete-li to změnit, můžete nakonfigurovat CurrencyPipe převést na jiné měny předáním dalších parametrů.
Zde je příklad:
<p>{{ number | currency: 'GBP' }}p>
Zde projdete GBP parametr k CurrencyPipe. Tím je zajištěno, že číslo proměnná převádí na britskou libru.
DecimalPipe a PercentPipe
The DecimalPipe transformuje vaše čísla na desetinná místa, zatímco PercentPipe převede vaše čísla na procenta.
Chcete-li použít DecimalPipe, použijte symbol potrubí následovaný číslo a další parametry. Chcete-li použít PercentPipe, udělejte totéž, ale vyměňte číslo s procent bez dalších parametrů.
Například:
<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>
Dodatečné parametry předané do DecimalPipe ovládat počet zobrazených celých a zlomkových číslic. The 1 parametr určuje, že by mělo existovat alespoň jedno celé číslo. Ve srovnání s 2.3 parametr určuje, že by měly být nejméně dvě a až tři desetinné číslice.
JsonPipe
The JsonPipe je vestavěný kanál, který převádí data do formátu řetězce JSON. Používá se hlavně pro účely ladění. Můžete použít JsonPipe na objektech i polích.
Syntaxe pro použití JsonPipe je následující:
{{ expression | json }}
Tady, výraz jsou data, která chcete převést do formátu JSON. Operátor potrubí (|) použije JsonPipe k výrazu.
Například definujte objekt a pole ve vaší komponentě:
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;
}
Výše uvedený blok kódu definuje a uživatel objekt a a profily pole. Nyní můžete použít JsonPipe převést objekt a pole na JSON.
<p>{{ user | json}}p>
<p>{{ profiles | json}}p>
Tady, JsonPipe převede uživatel objekt a profily pole do řetězce JSON, který můžete rychle zkontrolovat ve svých šablonách během vývoje nebo ladění.
SlicePipe
The SlicePipe je velmi podobný JavaScriptu plátek() metoda. The SlicePipe formátuje pole nebo řetězce extrahováním jejich prvků za účelem vytvoření nových polí nebo řetězců.
Chcete-li použít SlicePipe, použijete symbol potrubí následovaný plátek a dva parametry, počáteční a koncový index. Počáteční index je pozice v poli nebo řetězci, kde potrubí začne extrahovat prvky, a koncový index je místo, kde potrubí přestane extrahovat prvky.
Zde je příklad, jak použít SlicePipe:
<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>
V tomto příkladu je SlicePipe extrahuje první dva prvky z tětiva proměnná, prvek na indexu 0 a prvek na indexu 1. Dále bude extrahovat první prvek z pole variabilní. The SlicePipe je užitečné, když chcete v šabloně zobrazit pouze část dat.
AsyncPipe
AsyncPipe je vestavěná úhlová trubka, která automaticky přihlásí a odhlásí odběr Observable nebo Promise. Vrací poslední hodnotu vydanou Observable nebo Promise.
Syntaxe pro použití AsyncPipe je následující:
{{ expression | async }}
Zde je výrazem Observable nebo Promise, k jehož odběru se chcete přihlásit.
Například:
let numbers = of(1, 2, 3, 4, 5);
Můžeš použít AsyncPipe pro přihlášení k odběru tohoto Observable a zobrazení nejnovější emitované hodnoty takto:
<p>{{ numbers | async }}p>
Tento blok kódu vypíše poslední číslo emitované pozorovatelem. AsyncPipe je velmi užitečné při zpracování asynchronních operací ve vašich šablonách. Automaticky se přihlásí k odběru Observable nebo Promise, když se komponenta inicializuje, a odhlásí se, když je zničena.
Řetězové trubky v úhlovém provedení
Můžete zřetězit roury dohromady a provést více transformací v jednom výrazu. Řetězení potrubí je stejně jednoduché jako použití mnoha operátorů potrubí (|) v jediném výrazu. Výstup každého potrubí se stává vstupem pro další.
Zde je základní syntaxe:
<p>{{ expression | pipe1 | pipe2 |... }}p>
Například můžete transformovat objekt data na řetězec pomocí DatePipe a poté převeďte tento řetězec na velká písmena pomocí UpperCasePipe.
<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>
Vytvářejte dynamické aplikace pomocí potrubí
Trubky jsou výkonnou funkcí v Angular, která vám umožňuje transformovat data předtím, než se zobrazí v pohledu. Zde jste se dozvěděli o různých vestavěných trubkách, které Angular nabízí, jako je DatePipe, CurrencyPipe, UpperCasePipe atd. Také jste se naučili, jak je používat ve své aplikaci k vytváření dynamičtějšího obsahu. Pomocí kanálů mohou vývojáři vytvářet flexibilnější a dynamičtější webové aplikace s menším množstvím kódu.
