Átfogó útmutató a szögletes csövekhez

Az Angular csövek lehetővé teszik a felhasználók számára az adatok átalakítását, mielőtt azok megjelennének a nézetben. A csövek hasonlóak más programozási nyelvek szűrőihez, de rugalmasabbak, és testreszabhatók az egyedi igényeknek megfelelően. Itt megtudhatja, hogyan használhatja a csöveket az Angular alkalmazásban.

Mik azok a csövek szögben?

Az Angular pipes adattranszformátorok, amelyek dinamikusabbá teszik az alkalmazást. Értéket vesznek bemenetként, és egy átalakított értéket adnak vissza kimenetként. Az adatok átalakítása lehet olyan egyszerű, mint egy dátum vagy pénznem formázása, vagy olyan összetett, mint az elemek listájának szűrése vagy rendezése.

Használhatja a csöveket az Angular összetevőiben és a sablonjaidat. A csövek használata egyszerű, és láncolással összetettebb átalakításokat hozhat létre.

Az Angular számos beépített csövet biztosít, beleértve DatePipe, UpperCasePipe, LowerCasePipe

, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, és AsyncPipe. Egyedi csövek létrehozására is alkalmas.

Minden beépített Angular pipe egyedi funkciót lát el, és segíthet az adatok átalakításában.

DatePipe

A DatePipe formátumok és megjelenítések a dátum és idő változóit meghatározott formátumban, figyelembe véve a területet. Ellentétben más keretrendszerekkel, amelyek megkövetelik JavaScript-csomagok a dátum és az idő formázásához, Angular használja a DatePipe. Használni DatePipe az alkalmazásban adja hozzá a cső szimbólumot (|), majd azt dátum és minden további paramétert.

Például:

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

Ebben a példában átadja a mostani dátum változó a DatePipe, amely aztán az alapértelmezett dátumformátum szerint formázza azt. Ön határozza meg a mostani dátum változót az összetevő TypeScript fájljában.

Íme egy példa:

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

További paramétereket is átadhat a DatePipe a kimenet testreszabásához:

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

A fenti kódblokk átment a shortDate paramétert a DatePipe. Ez elmondja a DatePipe a dátum formázásához a rövid dátumformátum használatával. Mellett a shortDate paramétert, akkor konfigurálhatja a DatePipe különféle paraméterek használatával, beleértve z, longDateés egyéni dátumformátumok, mint pl nn/hh/ÉÉ.

UpperCasePipe és LowerCasePipe

A UpperCasePipe és LowerCasePipe átalakítja a szövegeit. A szövegeket nagybetűssé alakíthatja a gombbal UpperCasePipe és kisbetűvel a LowerCasePipe.

Használatához a UpperCasePipe és LowerCasePipe, adja hozzá a cső szimbólumot (|), majd ezt követi kisbetűvel használni a LowerCasePipe vagy nagybetűs használni a UpperCasePipe.

Az alábbiakban egy példa látható a UpperCasePipe és LowerCasePipe:

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

CurrencyPipe

Használni a CurrencyPipe, a számokat pénznemre formázhatja az alkalmazásban. A CurrencyPipe a számokat az Ön országának megfelelően formázza. A számok formázásához a CurrencyPipe, használja a cső szimbólumot, majd ezt követően valuta.

Például:

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

Ebben a példában a CurrencyPipe a számváltozót pénznemre konvertálja. Alapértelmezés szerint a CurrencyPipe a változókat dollárra konvertálja. Ennek megváltoztatásához konfigurálhatja a CurrencyPipe további paraméterek átadásával konvertálni más pénznemekre.

Íme egy példa:

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

Tessék, átadja a angol font paramétert a CurrencyPipe. Ez biztosítja, hogy a szám változó átváltja a brit font valutát.

DecimalPipe és PercentPipe

A DecimalPipe a számokat tizedesjegyekké alakítja, míg a PercentPipe százalékokká alakítja át a számokat.

Használatához a DecimalPipe, használja a cső szimbólumot, majd ezt követően szám és további paraméterek. Használatához a PercentPipe, tegye ugyanezt, de cserélje ki a szám val vel százalék további paraméterek nélkül.

Például:

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

A további paraméterek a DecimalPipe szabályozza a megjelenített egész és tört számjegyek számát. A 1 paraméter határozza meg, hogy legalább egy egész számjegynek kell lennie. Ehhez képest a 2.3 paraméter határozza meg, hogy legalább kettő és legfeljebb három tört számjegy legyen.

JsonPipe

A JsonPipe egy beépített cső, amely az adatokat JSON karakterlánc-formátumba konvertálja. Főleg hibakeresési célokra használják. Használhatja a JsonPipe objektumon és tömbön egyaránt.

A szintaxis a használatához JsonPipe az alábbiak:

{{ expression | json }}

Itt, kifejezés az az adat, amelyet JSON formátumba szeretne konvertálni. A csőkezelő (|) alkalmazza a JsonPipe a kifejezésre.

Például adjon meg egy objektumot és egy tömböt az összetevőben:

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

A fenti kódblokk meghatározza a felhasználó tárgy és a profilok sor. Most már használhatja a JsonPipe az objektum és a tömb JSON-ba konvertálásához.

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

Itt, a JsonPipe átalakítja a felhasználó tárgy és a profilok tömböt egy JSON-karakterláncba, amelyet gyorsan megtekinthet a sablonokban a fejlesztés vagy a hibakeresés során.

SlicePipe

A SlicePipe nagyon hasonlít a JavaScript-hez szelet() módszer. A SlicePipe tömböket vagy karakterláncokat formáz, elemeik kibontásával új tömböket vagy karakterláncokat hoz létre.

Használatához a SlicePipe, akkor használja a cső szimbólumot, majd ezt követi szelet és két paraméter, a kezdő és záró index. A kezdőindex az a pozíció a tömbben vagy karakterláncban, ahol a cső megkezdi az elemek kinyerését, a végindex pedig az, ahol a cső abbahagyja az elemek kivonását.

Íme egy példa arra, hogyan kell használni a SlicePipe:

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

Ebben a példában a SlicePipe kivonja az első két elemet a húr változó, a 0 indexű elem és az 1. indexű elem. Továbbá kivonja az első elemet a sor változó. A SlicePipe akkor hasznos, ha csak az adatok egy részét szeretné megjeleníteni a sablonban.

AsyncPipe

AsyncPipe egy beépített Angular pipe, amely automatikusan feliratkozik és leiratkozik egy megfigyelhető vagy ígéretre. A Megfigyelhető vagy az ígéret által kibocsátott legutóbbi értéket adja vissza.

A használat szintaxisa AsyncPipe az alábbiak:

{{ expression | async }}

Itt a kifejezés az a megfigyelhető vagy ígéret, amelyre elő szeretne iratkozni.

Például:

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

Te tudod használni AsyncPipe feliratkozni erre a megfigyelhetőre, és megjeleníteni a legutóbbi kibocsátott értéket, így:

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

Ez a kódblokk a Megfigyelhető által kibocsátott legutóbbi számot adja ki. AsyncPipe nagyon hasznos, ha aszinkron műveleteket kezel a sablonokban. Automatikusan előfizet a megfigyelhető vagy ígéretre, amikor az összetevő inicializálódik, és leiratkozik, ha megsemmisül.

Csövek láncolása szögben

A csöveket összeláncolhatja, hogy egyetlen kifejezésben több transzformációt hajtson végre. A csövek láncolása olyan egyszerű, mint számos csőkezelő (|) használata egyetlen kifejezésben. Minden cső kimenete a következő bemenetévé válik.

Íme az alapvető szintaxis:

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

Például átalakíthat egy dátum objektumot karakterláncsá a DatePipe majd konvertálja a karakterláncot nagybetűssé a segítségével UpperCasePipe.

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

Dinamikus alkalmazások létrehozása csövek segítségével

A csövek az Angular egyik hatékony funkciója, amely lehetővé teszi az adatok átalakítását, mielőtt azok megjelennének a nézetben. Itt megismerkedhetett az Angular különféle beépített csöveivel, mint például a DatePipe, CurrencyPipe, UpperCasePipe stb. Azt is megtanulta, hogyan használhatja őket az alkalmazásban dinamikusabb tartalom létrehozásához. A csövek segítségével a fejlesztők rugalmasabb és dinamikusabb webalkalmazásokat hozhatnak létre kevesebb kóddal.