Kaip sukurti pasirinktinius kampinius vamzdžius

Vamzdžiai yra galinga kampinė funkcija, leidžianti transformuoti ir formatuoti duomenis jūsų programoje. Jie suteikia patogų būdą manipuliuoti duomenimis prieš juos rodant vartotojui, todėl jūsų programa tampa dinamiškesnė ir patogesnė.

Angular siūlo įvairius įmontuotus vamzdžius, tokius kaip DatePipe, CurrencyPipe ir UpperCasePipe. Kartu su įmontuotais vamzdžiais, kuriuos siūlo Angular, galite sukurti pasirinktinius vamzdžius, kad pakeistumėte duomenis bet kokiu būdu.

Sukurkite savo kampinį projektą

Prieš kurdami pasirinktinius vamzdžius, įsitikinkite, kad suprasti vamzdžius kampu. Kad galėtumėte nustatyti kampinį projektą, įsitikinkite, kad jūsų kompiuteryje įdiegtas kampinis CLI. Galite įdiegti su npm (mazgų paketų tvarkyklė).

Įdiekite Angular CLI vykdydami šią komandą:

npm install -g @angular/cli

Tada sukurkite naują kampinį projektą vykdydami šią komandą:

ng new my-app

Sukūrę projektą, eikite į savo projekto katalogą ir atidarykite programą savo IDE.

Sukurkite pasirinktinį vamzdį

Dabar, kai nustatėte „Angular“ programą, kitas dalykas, kurį reikia padaryti, yra sukurti pasirinktinį vamzdį. Norėdami sukurti pasirinktinį vamzdį, turite sugeneruoti naują naudodami kampinį CLI.

Norėdami tai padaryti, terminalo programos kataloge paleiskite šią komandą:

ng generate pipe customPipe

Ši komanda sugeneruos du pavadinimus custom-pipe.pipe.ts ir custom-pipe.pipe.spec.ts viduje src/app katalogas. Custom-pipe.pipe.ts failas yra „TypeScript“ failą kuriame yra jūsų pasirinktinio vamzdžio apibrėžimo kodas. Norėdami atlikti pasirinktinio vamzdžio testus, naudosite custom-pipe.pipe.spec.ts.

Viduje custom-pipe.pipe.ts failą, rasite šias kodo eilutes:

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

Šis kodo blokas importuoja Vamzdis dekoratorius ir Vamzdžių transformacija sąsaja iš @kampinis/šerdis modulis. „Pipe“ dekoratorius apibrėžia vamzdžio metaduomenis, o vamzdžių klasė įgyvendina „PipeTransform“ sąsają.

Viduje CustomPipePipe klasėje, įgyvendinate Vamzdžių transformacija sąsaja, kuriai reikia įdiegti transformuoti metodas. Transformacijos metodas yra atsakingas už įvesties vertės transformavimą.

The transformuoti metodas apima du parametrus, vertė ir args. Vertės parametras nurodo vamzdžio transformacijos vertę, o parametras args – pasirenkamus parametrus, kuriuos galbūt norėsite pridėti.

Dabar jūs supratote pagrindą custom-pipe.pipe.ts failą, pakeiskite aukščiau esantį kodo bloką šiuo kodu:

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

Šiame kodo bloke transformuoti metodas paima vertė tipo parametras styga kaip argumentą ir grąžina eilučių masyvą. Transformacijos metodas padalija įvesties eilutę į atskirų simbolių masyvą, naudodamas padalintas metodą ir grąžina gautą masyvą.

Pasirinktinio vamzdžio integravimas į programą

Sėkmingai sukūrėte pasirinktinį vamzdį ir dabar galite jį naudoti savo kampiniuose šablonuose. Prieš naudodami pasirinktinį vamzdį savo programoje, importuokite ir deklaruokite jį savo programoje app.module.ts failą. Norėdami tai padaryti, pakeiskite kodą adresu app.module.t šiuo:

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

Dabar galite naudoti vamzdį savo šablonuose. Atidaryk app.component.html failą ir pridėkite šį kodą:

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

Šiame pavyzdyje jūs naudojate CustomPipe vamzdis stygai transformuoti "obuolys" į eilučių masyvą.

Išbandykite savo pasirinktinį vamzdį

Norėdami pamatyti savo pasirinktinį vamzdį, paleiskite Angular plėtros serverį. Tai galite padaryti paleisdami šią terminalo komandą:

ng serve

Atidarykite naršyklę ir eikite į http://localhost: 4200. Turėtumėte pamatyti puslapyje rodomą transformuotą eilutę:

Perkelkite savo kampines programas į kitą lygį

Vamzdžiai yra galingas kampinis įrankis, leidžiantis transformuoti ir formatuoti duomenis jūsų programoje. Galite sukurti pasirinktinius vamzdžius, kad atitiktų jūsų konkrečius poreikius, ir padaryti savo Angular programą dinamiškesnę.

Kitas būdas perkelti savo Angular programas į kitą lygį yra suprasti maršruto nustatymą Angular. Maršrutas yra pagrindinė sąvoka, leidžianti valdyti, kaip naudotojai naršys jūsų programoje. Suprasdami maršrutą, galite sukurti vieno puslapio programas, kurios yra patogesnės ir efektyvesnės.