Helpota tietojen muuntamista Angular-sovelluksissa Angular-putkien avulla.
Angular-putkien avulla käyttäjät voivat muuttaa tietoja ennen kuin ne näytetään näkymässä. Putket ovat samanlaisia kuin muiden ohjelmointikielten suodattimet, mutta ne ovat joustavampia ja ne voidaan räätälöidä vastaamaan erityisiä tarpeita. Täällä opit käyttämään putkia Angular-sovelluksessasi.
Mitä ovat kulmaputket?
Angular pipes ovat datamuuntajia, jotka tekevät sovelluksestasi dynaamisemman. Ne ottavat arvon syötteenä ja palauttavat muunnetun arvon ulostulona. Tietojen muuntaminen voi olla yhtä yksinkertaista kuin päivämäärän tai valuutan muotoilu tai yhtä monimutkainen kuin kohteiden luettelon suodattaminen tai lajittelu.
Voit käyttää putkia Angular-komponenteissasi ja mallejasi. Putket ovat helppokäyttöisiä, ja voit ketjuttaa ne luodaksesi monimutkaisempia muunnoksia.
Angular tarjoaa useita sisäänrakennettuja putkia, mukaan lukien DatePipe, UpperCasePipe, LowerCasePipe, ValuuttaPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, ja AsyncPipe. Se tarjoaa myös toiminnot mukautettujen putkien luomiseen.
Jokainen sisäänrakennettu Angular-putki suorittaa ainutlaatuisen toiminnon ja voi auttaa sinua muuttamaan tietoja.
DatePipe
The DatePipe formaatteja ja näyttöjä päivämäärä- ja aikamuuttujasi määritetyssä muodossa kieli- ja alueesi mukaan. Toisin kuin muut vaativat puitteet JavaScript-paketit muotoilemaan päivämäärän ja ajan, Angular käyttää DatePipe. Käyttää DatePipe lisää sovellukseesi putkisymboli (|) ja sen jälkeen Päivämäärä ja mahdolliset lisäparametrit.
Esimerkiksi:
<p>Today's date is {{ currentDate | date }}p>
Tässä esimerkissä ohitat nykyinen päivämäärä muuttuja kautta DatePipe, joka muotoilee sen sitten päivämäärän oletusmuodon mukaan. Sinä määrittelet nykyinen päivämäärä muuttuja komponenttisi TypeScript-tiedostossa.
Tässä on esimerkki:
import { Component } from'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
currentDate: any = newDate();
}
Voit myös välittää lisäparametreja DatePipe mukauttaaksesi tulostetta:
<p>Today's date is {{ currentDate | date:'shortDate' }}p>
Yllä oleva koodilohko läpäisi lyhytpäivämäärä parametrille DatePipe. Tämä kertoo DatePipe muotoilla päivämäärä käyttämällä lyhyttä päivämäärämuotoa. rinnalla lyhytpäivämäärä parametri, voit määrittää DatePipe käyttämällä erilaisia parametreja, mukaan lukien z, longDateja mukautettuja päivämäärämuotoja, kuten pp/KK/VV.
UpperCasePipe ja LowerCasePipe
The UpperCasePipe ja LowerCasePipe muuttaa tekstejäsi. Muutat tekstisi isoiksi käyttämällä UpperCasePipe ja pieniä kirjaimia käyttämällä LowerCasePipe.
Käyttääksesi UpperCasePipe ja LowerCasePipe, lisää putken symboli (|) ja sen jälkeen pienet kirjaimet käyttää LowerCasePipe tai isot kirjaimet käyttää UpperCasePipe.
Alla on esimerkki, kuinka käyttää UpperCasePipe ja LowerCasePipe:
<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>
ValuuttaPipe
Käyttämällä ValuuttaPipe, voit muotoilla numerot valuutaksi sovelluksessasi. The ValuuttaPipe muotoilee numerot alueesi mukaan. Voit muotoilla numerot käyttämällä ValuuttaPipe, käytä putkisymbolia ja sen jälkeen valuutta.
Esimerkiksi:
<p>{{ number | currency }}p>
Tässä esimerkissä ValuuttaPipe muuntaa lukumuuttujan valuutaksi. Oletuksena ValuuttaPipe muuntaa muuttujat dollareiksi. Voit muuttaa tätä määrittämällä ValuuttaPipe muuntaa muihin valuuttoihin antamalla lisäparametreja.
Tässä on esimerkki:
<p>{{ number | currency: 'GBP' }}p>
Tässä ohitat GBP parametrille ValuuttaPipe. Tämä varmistaa, että määrä muuttuja muuntaa Ison-Britannian punnan valuutaksi.
DecimalPipe ja PercentPipe
The DecimalPipe muuntaa luvut desimaaleiksi, kun taas PercentPipe muuntaa luvut prosenteiksi.
Käyttääksesi DecimalPipe, käytä putkisymbolia ja sen jälkeen määrä ja lisäparametreja. Käyttääksesi PercentPipe, tee sama, mutta vaihda määrä kanssa prosenttia ilman lisäparametreja.
Esimerkiksi:
<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>
Lisäparametrit välitettiin DecimalPipe ohjata näytettävien kokonaislukujen ja murtolukujen määrää. The 1 parametri määrittää, että siinä tulee olla vähintään yksi kokonaisluku. Vertailun vuoksi, 2.3 parametri määrittää, että murtolukuja on oltava vähintään kaksi ja enintään kolme.
JsonPipe
The JsonPipe on sisäänrakennettu putki, joka muuntaa tiedot JSON-merkkijonomuotoon. Sitä käytetään pääasiassa virheenkorjaustarkoituksiin. Voit käyttää JsonPipe sekä objekteissa että taulukoissa.
Syntaksi JsonPipe on seuraava:
{{ expression | json }}
Tässä, ilmaisu on tiedot, jotka haluat muuntaa JSON-muotoon. Putken käyttäjä (|) soveltaa JsonPipe ilmaisuun.
Määritä esimerkiksi objekti ja taulukko komponentissasi:
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;
}
Yllä oleva koodilohko määrittää a käyttäjä esine ja a profiilit joukko. Nyt voit käyttää JsonPipe muuntaaksesi objektin ja taulukon JSON-muotoon.
<p>{{ user | json}}p>
<p>{{ profiles | json}}p>
Tässä, JsonPipe muuntaa käyttäjä esine ja profiilit taulukon JSON-merkkijonoksi, jonka voit tarkistaa nopeasti malleistasi kehityksen tai virheenkorjauksen aikana.
SlicePipe
The SlicePipe on hyvin samanlainen kuin JavaScript viipale() menetelmä. The SlicePipe muotoilee taulukoita tai merkkijonoja purkamalla niiden elementit luodakseen uusia taulukoita tai merkkijonoja.
Käyttääksesi SlicePipe, käytät putkisymbolia ja sen jälkeen viipale ja kaksi parametria, aloitus- ja loppuindeksit. Aloitusindeksi on paikka taulukossa tai merkkijonossa, jossa putki alkaa poimia elementtejä, ja loppuindeksi on paikka, jossa putki lopettaa elementtien poistamisen.
Tässä on esimerkki kuinka käyttää SlicePipe:
<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>
Tässä esimerkissä SlicePipe purkaa kaksi ensimmäistä elementtiä merkkijono muuttuja, elementti indeksissä 0 ja elementti indeksissä 1. Lisäksi se poimii ensimmäisen elementin joukko muuttuja. The SlicePipe on hyödyllinen, kun haluat näyttää mallissa vain osan tiedoista.
AsyncPipe
AsyncPipe on sisäänrakennettu Angular pipe, joka tilaa ja peruuttaa automaattisesti havaittavan tai lupauksen. Se palauttaa viimeisimmän havaittavan tai lupauksen lähettämän arvon.
Syntaksi käyttöä varten AsyncPipe on seuraava:
{{ expression | async }}
Tässä lauseke on havaittava tai lupaus, jonka haluat tilata.
Esimerkiksi:
let numbers = of(1, 2, 3, 4, 5);
Voit käyttää AsyncPipe tilata tämä Observable ja näyttää viimeisin lähetetty arvo seuraavasti:
<p>{{ numbers | async }}p>
Tämä koodilohko tulostaa viimeisimmän havaittavan numeron. AsyncPipe on erittäin hyödyllinen käsiteltäessä asynkronisia toimintoja malleissasi. Se tilaa automaattisesti Observable- tai Promise-komponentin, kun komponentti alustetaan, ja peruuttaa tilauksen, kun se tuhoutuu.
Putkien ketjutus kulmikkaasti
Voit ketjuttaa putket yhteen suorittaaksesi useita muunnoksia yhdessä lausekkeessa. Putkien ketjuttaminen on yhtä helppoa kuin useiden putkioperaattoreiden (|) käyttäminen yhdessä lausekkeessa. Jokaisen putken ulostulosta tulee seuraavan tulo.
Tässä on perussyntaksi:
<p>{{ expression | pipe1 | pipe2 |... }}p>
Voit esimerkiksi muuntaa päivämääräobjektin merkkijonoksi käyttämällä DatePipe ja muuntaa sitten merkkijono isoiksi käyttämällä UpperCasePipe.
<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>
Luo dynaamisia sovelluksia putkien avulla
Putket ovat Angularin tehokas ominaisuus, jonka avulla voit muuntaa tietoja ennen kuin ne näkyvät näkymässä. Täällä opit erilaisista Angular-tarjouksista sisäänrakennetuista putkista, kuten DatePipe, CurrencyPipe, UpperCasePipe jne. Opit myös käyttämään niitä sovelluksessasi dynaamisemman sisällön luomiseen. Putkien avulla kehittäjät voivat luoda joustavampia ja dynaamisempia verkkosovelluksia vähemmällä koodilla.
