Használjon egyedi csöveket az adatok formázásához, ahogyan szüksége van rá.
A csövek egy erőteljes Angular funkció, amely lehetővé teszi az adatok átalakítását és formázását az alkalmazásban. Kényelmes módot biztosítanak az adatok manipulálására, mielőtt azokat a felhasználónak megjelenítenék, így az alkalmazás dinamikusabbá és felhasználóbarátabbá válik.
Az Angular különféle beépített csöveket kínál, mint például a DatePipe, a CurrencyPipe és az UpperCasePipe. Az Angular által kínált beépített csövek mellett egyedi csöveket is létrehozhat az adatok bármilyen módon történő átalakításához.
Állítsa be szögprojektjét
Egyedi csövek létrehozása előtt győződjön meg arról, hogy érti a csöveket szögben. A Angular projekt beállításához győződjön meg arról, hogy az Angular CLI telepítve van a gépen. Ezzel telepítheti npm (Node Package Manager).
Telepítse az Angular CLI-t a következő parancs futtatásával:
npm install -g @angular/cli
Ezután hozzon létre egy új Angular projektet a következő parancs futtatásával:
ng new my-app
Miután létrehozta a projektet, navigáljon a projektkönyvtárba, és nyissa meg az alkalmazást az IDE-n.
Hozzon létre egy egyedi csövet
Most, hogy beállította az Angular alkalmazást, a következő teendő az egyéni cső létrehozása. Egyéni cső létrehozásához létre kell hoznia egy újat az Angular CLI segítségével.
Ehhez futtassa a következő parancsot az alkalmazás könyvtárában a terminálon:
ng generate pipe customPipe
Ez a parancs két nevű fájlt generál custom-pipe.pipe.ts és custom-pipe.pipe.spec.ts ban,-ben src/app Könyvtár. A custom-pipe.pipe.ts fájl az egy TypeScript fájl amely tartalmazza az egyéni cső meghatározásához szükséges kódot. A custom-pipe.pipe.spec.ts fájlt használja az egyéni cső teszteléséhez.
Ban,-ben custom-pipe.pipe.ts fájlban a következő kódsorokat találja:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
}
}
Ez a kódblokk importálja a Cső lakberendező és a PipeTransform interfész a @szögletes/mag modult. A Pipe dekorátor határozza meg a cső metaadatait, a pipe osztály pedig a PipeTransform interfészt valósítja meg.
Ban,-ben CustomPipePipe osztályban valósítja meg a PipeTransform interfész, amely megköveteli a megvalósítását átalakítani módszer. A transzformációs módszer felelős a bemeneti érték átalakításáért.
A átalakítani a módszer két paramétert igényel, érték és args. Az érték paraméter a cső transzformációs értékét jelenti, az args paraméter pedig azokat az opcionális paramétereket, amelyeket esetleg szeretne hozzáadni.
Most már megértette a kazán alapját custom-pipe.pipe.ts fájlt, cserélje ki a fenti kódblokkot erre a kódra:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
Ebben a kódblokkban a átalakítani módszer veszi a érték a típus paramétere húr argumentumként, és egy karakterlánc-tömböt ad vissza. A transzformációs módszer a bemeneti karakterláncot egyedi karakterek tömbjére bontja a hasított metódust, és visszaadja a kapott tömböt.
Az egyedi cső integrálása az alkalmazásba
Sikeresen létrehozta az egyéni csövet, és most már használhatja az Angular sablonokban. Mielőtt az egyéni csövet az alkalmazásban használná, importálja és deklarálja az alkalmazásban app.module.ts fájlt. Ehhez cserélje ki az app.module.t fájl kódját a következőre:
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 { }
Most már használhatja a csövet a sablonokban. Nyissa meg a app.component.html fájlt, és adja hozzá a következő kódot:
<p>{{ 'apple' | CustomPipe }}p>
Ebben a példában a CustomPipe pipe a húr átalakításához 'alma' egy string tömbbe.
Tesztelje egyedi csövét
Az egyéni cső működésének megtekintéséhez futtassa az Angular fejlesztőkiszolgálót. Ezt a következő terminálparancs futtatásával teheti meg:
ng serve
Nyissa meg a böngészőt, és navigáljon ide http://localhost: 4200. Látnia kell az átalakított karakterláncot az oldalon:
Emelje a következő szintre szögletes alkalmazásait
A csövek egy hatékony Angular eszköz, amely lehetővé teszi az adatok átalakítását és formázását az alkalmazásban. Létrehozhat egyedi csöveket, amelyek megfelelnek egyedi igényeinek, és dinamikusabbá tehetik Angular alkalmazását.
Egy másik módja annak, hogy az Angular alkalmazásait a következő szintre emelje, ha megérti az Angular útválasztást. Az útválasztás kulcsfontosságú fogalom, amely lehetővé teszi annak szabályozását, hogy a felhasználók hogyan navigáljanak az alkalmazásban. Az útválasztás megértésével egyoldalas alkalmazásokat készíthet, amelyek felhasználóbarátabbak és hatékonyabbak.
