Kuidas luua kohandatud torusid nurga all

Torud on võimas Angular-funktsioon, mis võimaldab teil rakenduses andmeid teisendada ja vormindada. Need pakuvad mugavat viisi andmetega manipuleerimiseks enne nende kasutajale kuvamist, muutes teie rakenduse dünaamilisemaks ja kasutajasõbralikumaks.

Angular pakub mitmesuguseid sisseehitatud torusid, nagu DatePipe, CurrencyPipe ja UpperCasePipe. Lisaks Angulari pakutavatele sisseehitatud torudele saate luua kohandatud torusid, et muuta andmeid mis tahes viisil, mida vajate.

Seadistage oma nurkprojekt

Enne kohandatud torude loomist veenduge, et mõista torusid nurga keeles. Nurgaprojekti seadistamiseks veenduge, et teie masinasse oleks installitud Angular CLI. Saate selle installida koos npm (sõlme paketihaldur).

Installige Angular CLI, käivitades järgmise käsu:

npm install -g @angular/cli

Järgmisena looge uus Angular projekt, käivitades selle käsu:

ng new my-app

Kui olete projekti loonud, liikuge oma projektikataloogi ja avage rakendus oma IDE-s.

Looge kohandatud toru

Nüüd, kui olete oma Angular rakenduse seadistanud, on järgmiseks kohandatud toru loomine. Kohandatud toru loomiseks peate Angular CLI abil looma uue.

Selleks käivitage terminalis oma rakenduse kataloogis järgmine käsk:

ng generate pipe customPipe

See käsk genereerib kaks nimega faili custom-pipe.pipe.ts ja custom-pipe.pipe.spec.ts aastal src/app kataloog. Custom-pipe.pipe.ts fail on TypeScript-faili mis sisaldab teie kohandatud toru määratlemise koodi. Kohandatud toruga testide tegemiseks kasutate faili custom-pipe.pipe.spec.ts.

Aastal custom-pipe.pipe.ts faili, leiate järgmised koodiread:

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

See koodiplokk impordib Toru dekoraator ja PipeTransform liides alates @nurkne/tuum moodul. Torukujundaja määratleb toru metaandmed ja toruklass rakendab PipeTransformi liidest.

Aastal KohandatudPipePipe klassi, siis rakendate PipeTransform liides, mis nõuab rakenduse rakendamist teisendada meetod. Teisendusmeetod vastutab sisendväärtuse teisendamise eest.

The teisendada meetodil on kaks parameetrit, väärtus ja args. Väärtuse parameeter tähistab toru teisendusväärtust ja parameeter args tähistab valikulisi parameetreid, mille võite soovida lisada.

Nüüd olete mõistnud plaadi põhijoont custom-pipe.pipe.ts faili, asendage ülaltoodud koodiplokk selle koodiga:

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

Selles koodiplokis on teisendada meetod võtab väärtus tüübi parameeter string argumendina ja tagastab stringide massiivi. Teisendusmeetod jagab sisendstringi üksikute märkide massiiviks, kasutades poolitatud meetod ja tagastab saadud massiivi.

Kohandatud toru integreerimine oma rakendusse

Olete oma kohandatud toru edukalt loonud ja saate seda nüüd oma nurgamallides kasutada. Enne kohandatud toru kasutamist oma rakenduses importige ja deklareerige see oma app.module.ts faili. Selleks asendage failis app.module.t olev kood järgmisega:

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

Nüüd saate toru oma mallides kasutada. Ava app.component.html faili ja lisage järgmine kood:

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

Selles näites kasutate Kohandatud toru toru stringi teisendamiseks "õun" stringimassiiviks.

Testige oma kohandatud toru

Kohandatud toru töös nägemiseks käivitage Angular arendusserver. Seda saate teha järgmise terminali käsu käivitamisega:

ng serve

Avage brauser ja navigeerige saidile http://localhost: 4200. Peaksite lehel nägema teisendatud stringi:

Viige oma nurgarakendused järgmisele tasemele

Torud on võimas Angular tööriist, mis võimaldab teil rakenduses andmeid teisendada ja vormindada. Saate luua kohandatud torusid, mis vastavad teie konkreetsetele vajadustele ja muuta oma Angular rakenduse dünaamilisemaks.

Veel üks viis oma Angulari rakenduste järgmisele tasemele viimiseks on mõista marsruutimist Angularis. Marsruutimine on põhikontseptsioon, mis võimaldab teil juhtida seda, kuidas kasutajad teie rakenduses navigeerivad. Marsruutimisest aru saades saate luua ühelehelisi rakendusi, mis on kasutajasõbralikumad ja tõhusamad.