Kuinka luoda mukautettuja putkia Angularissa

Putket ovat tehokas Angular-ominaisuus, jonka avulla voit muuntaa ja muotoilla tietoja sovelluksessasi. Ne tarjoavat kätevän tavan käsitellä tietoja ennen niiden näyttämistä käyttäjälle, mikä tekee sovelluksestasi dynaamisemman ja käyttäjäystävällisemmän.

Angular tarjoaa erilaisia ​​sisäänrakennettuja putkia, kuten DatePipe, CurrencyPipe ja UpperCasePipe. Angularin tarjoamien sisäänrakennettujen putkien lisäksi voit luoda mukautettuja putkia tietojen muuntamiseksi haluamallasi tavalla.

Aseta kulmaprojektisi

Ennen kuin luot mukautettuja putkia, varmista, että olet ymmärtää putkia Angularissa. Jotta voit määrittää Angular-projektin, varmista, että sinulla on Angular CLI asennettuna koneellesi. Voit asentaa sen kanssa npm (Node Package Manager).

Asenna Angular CLI suorittamalla seuraava komento:

npm install -g @angular/cli

Luo seuraavaksi uusi Angular-projekti suorittamalla tämä komento:

ng new my-app

Kun olet luonut projektin, siirry projektihakemistoosi ja avaa sovelluksesi IDE: ssäsi.

Luo mukautettu putki

Nyt kun olet määrittänyt Angular-sovelluksesi, seuraavaksi sinun tulee luoda mukautettu putki. Mukautetun putken luomiseksi sinun on luotava uusi käyttämällä Angular CLI: tä.

Voit tehdä tämän suorittamalla seuraavan komennon sovelluksesi hakemistossa terminaalissa:

ng generate pipe customPipe

Tämä komento luo kaksi tiedostoa nimeltä custom-pipe.pipe.ts ja custom-pipe.pipe.spec.ts in src/app hakemistosta. Custom-pipe.pipe.ts-tiedosto on TypeScript-tiedosto joka sisältää koodin mukautetun putken määrittämiseksi. Käytä custom-pipe.pipe.spec.ts-tiedostoa testataksesi mukautettua putkea.

Vuonna custom-pipe.pipe.ts tiedostosta löydät seuraavat koodirivit:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Tämä koodilohko tuo Putki sisustaja ja PipeTransform käyttöliittymä osoitteesta @kulma/ydin moduuli. Pipe Decorator määrittää putken metatiedot ja putkiluokka toteuttaa PipeTransform-rajapinnan.

Vuonna CustomPipePipe luokka, toteutat PipeTransform käyttöliittymä, joka vaatii toteuttamisen muuttaa menetelmä. Muunnosmenetelmä vastaa syötearvon muuntamisesta.

The muuttaa menetelmä vaatii kaksi parametria, arvo ja args. Arvoparametri edustaa putken muunnosarvoa ja args-parametri edustaa valinnaisia ​​parametreja, jotka voit halutessasi lisätä.

Nyt olet ymmärtänyt järjestelmän perusteet custom-pipe.pipe.ts tiedosto, korvaa yllä oleva koodilohko tällä koodilla:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

Tässä koodilohkossa muuttaa menetelmä vie arvo tyypin parametri merkkijono argumenttina ja palauttaa joukon merkkijonoja. Muunnosmenetelmä jakaa syötemerkkijonon yksittäisten merkkien joukoksi käyttämällä jakaa menetelmä ja palauttaa tuloksena olevan taulukon.

Mukautetun putken integrointi sovellukseesi

Olet luonut mukautetun putken onnistuneesti ja voit nyt käyttää sitä Angular-malleissasi. Ennen kuin käytät mukautettua putkea sovelluksessasi, tuo se ja ilmoita se sovelluksessasi app.module.ts tiedosto. Voit tehdä tämän korvaamalla koodin osoitteessa app.module.t seuraavalla:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Nyt voit käyttää putkea malleissasi. Avaa app.component.html tiedosto ja lisää seuraava koodi:

<p>{{ 'apple' | CustomPipe }}p>

Tässä esimerkissä käytät CustomPipe putki muuttaaksesi merkkijonoa 'omena' merkkijonotaulukkoon.

Testaa mukautettua putkeasi

Jos haluat nähdä mukautetun putken toiminnassa, suorita Angular-kehityspalvelin. Voit tehdä tämän suorittamalla seuraavan terminaalikomennon:

ng serve

Avaa selain ja siirry kohtaan http://localhost: 4200. Sinun pitäisi nähdä muunnettu merkkijono sivulla:

Vie Angular-sovelluksesi seuraavalle tasolle

Putket ovat tehokas Angular-työkalu, jonka avulla voit muuntaa ja muotoilla tietoja sovelluksessasi. Voit luoda räätälöityjä putkia tarpeidesi mukaan ja tehdä Angular-sovelluksestasi dynaamisemman.

Toinen tapa viedä Angular-sovelluksesi uudelle tasolle on ymmärtää Angular-reititys. Reititys on keskeinen käsite, jonka avulla voit hallita sitä, miten käyttäjät liikkuvat sovelluksessasi. Ymmärtämällä reitityksen voit rakentaa yksisivuisia sovelluksia, jotka ovat käyttäjäystävällisempiä ja tehokkaampia.