Kā izveidot pielāgotas caurules leņķiskā formā

Caurules ir jaudīga Angular funkcija, kas ļauj pārveidot un formatēt datus jūsu lietojumprogrammā. Tie nodrošina ērtu veidu, kā manipulēt ar datiem pirms to parādīšanas lietotājam, padarot jūsu lietojumprogrammu dinamiskāku un lietotājam draudzīgāku.

Angular piedāvā dažādas iebūvētās caurules, piemēram, DatePipe, CurrencyPipe un UpperCasePipe. Papildus Angular piedāvātajām iebūvētajām caurulēm jūs varat izveidot pielāgotas caurules, lai pārveidotu datus jebkurā jums nepieciešamajā veidā.

Izveidojiet savu leņķisko projektu

Pirms pielāgotu cauruļu izveidošanas pārliecinieties, vai saprast caurules leņķiski. Lai varētu iestatīt Angular projektu, pārliecinieties, vai jūsu datorā ir instalēta Angular CLI. Jūs varat to instalēt ar npm (mezglu pakotņu pārvaldnieks).

Instalējiet Angular CLI, izpildot šādu komandu:

npm install -g @angular/cli

Pēc tam izveidojiet jaunu Angular projektu, izpildot šo komandu:

ng new my-app

Kad esat izveidojis projektu, dodieties uz sava projekta direktoriju un atveriet lietojumprogrammu savā IDE.

Izveidojiet pielāgotu cauruli

Tagad, kad esat iestatījis savu Angular lietojumprogrammu, nākamā lieta, kas jādara, ir izveidot pielāgotu cauruli. Lai izveidotu pielāgotu cauruli, jums ir jāģenerē jauna, izmantojot Angular CLI.

Lai to izdarītu, termināļa lietotnes direktorijā palaidiet šādu komandu:

ng generate pipe customPipe

Šī komanda ģenerēs divus failus ar nosaukumu custom-pipe.pipe.ts un custom-pipe.pipe.spec.ts iekš src/app direktoriju. Custom-pipe.pipe.ts fails ir TypeScript fails kurā ir kods jūsu pielāgotās caurules definēšanai. Lai veiktu pielāgotās caurules testus, izmantosiet failu custom-pipe.pipe.spec.ts.

Iekš custom-pipe.pipe.ts failu, jūs atradīsit šīs koda rindas:

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

Šis koda bloks importē Caurule dekorators un Cauruļu transformācija interfeiss no @angular/core modulis. Caurules dekorētājs definē caurules metadatus, un cauruļu klase ievieš PipeTransform saskarni.

Iekš CustomPipePipe klasē, jūs īstenojat Cauruļu transformācija interfeiss, kas prasa ieviešanu pārveidot metodi. Transformācijas metode ir atbildīga par ievades vērtības pārveidošanu.

The pārveidot metodei nepieciešami divi parametri, vērtību un args. Vērtības parametrs apzīmē caurules transformācijas vērtību, bet parametrs args apzīmē izvēles parametrus, kurus, iespējams, vēlēsities pievienot.

Tagad jūs esat sapratis pamatplāksni custom-pipe.pipe.ts failu, aizstājiet iepriekš minēto koda bloku ar šo kodu:

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

Šajā koda blokā pārveidot metode aizņem vērtību tipa parametrs virkne kā argumentu un atgriež virkņu masīvu. Transformācijas metode sadala ievades virkni atsevišķu rakstzīmju masīvā, izmantojot sadalīt metodi un atgriež iegūto masīvu.

Pielāgotas caurules integrēšana jūsu lietojumprogrammā

Jūs esat veiksmīgi izveidojis savu pielāgoto cauruli un tagad varat to izmantot savās leņķa veidnēs. Pirms lietojat pielāgoto cauruli savā lietojumprogrammā, importējiet un deklarējiet to savā app.module.ts failu. Lai to izdarītu, aizstājiet kodu app.module.t ar šādu:

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

Tagad jūs varat izmantot cauruli savās veidnēs. Atveriet app.component.html failu un pievienojiet šādu kodu:

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

Šajā piemērā jūs izmantojat CustomPipe caurule, lai pārveidotu virkni "ābols" virkņu masīvā.

Pārbaudiet savu pielāgoto cauruli

Lai redzētu savu pielāgoto cauruli darbībā, palaidiet Angular izstrādes serveri. To var izdarīt, izpildot šādu termināļa komandu:

ng serve

Atveriet pārlūkprogrammu un dodieties uz http://localhost: 4200. Lapā vajadzētu redzēt pārveidoto virkni:

Paceliet savas leņķiskās lietojumprogrammas uz nākamo līmeni

Caurules ir spēcīgs Angular rīks, kas ļauj pārveidot un formatēt datus jūsu lietojumprogrammā. Varat izveidot pielāgotas caurules, kas atbilst jūsu īpašajām vajadzībām, un padarīt savu Angular lietojumprogrammu dinamiskāku.

Vēl viens veids, kā pacelt savas Angular lietojumprogrammas uz nākamo līmeni, ir saprast maršrutēšanu Angular. Maršrutēšana ir galvenais jēdziens, kas ļauj kontrolēt, kā lietotāji pārvietojas jūsu lietojumprogrammā. Izprotot maršrutēšanu, varat izveidot lietotājam draudzīgākas un efektīvākas vienas lapas lietojumprogrammas.