Kako ustvariti cevi po meri v Angular

Cevi so zmogljiva funkcija Angular, ki vam omogoča transformacijo in oblikovanje podatkov v vaši aplikaciji. Zagotavljajo priročen način za manipulacijo podatkov, preden jih prikažejo uporabniku, zaradi česar je vaša aplikacija bolj dinamična in uporabniku prijazna.

Angular ponuja različne vgrajene cevi, kot so DatePipe, CurrencyPipe in UpperCasePipe. Poleg vgrajenih cevi, ki jih ponuja Angular, lahko ustvarite cevi po meri za pretvorbo podatkov na poljuben način.

Nastavite svoj kotni projekt

Pred ustvarjanjem cevi po meri se prepričajte, da ste razumeti cevi v Angularju. Če želite nastaviti Angular projekt, se prepričajte, da imate na svojem računalniku nameščen Angular CLI. Lahko ga namestite z npm (upravitelj paketov vozlišč).

Namestite Angular CLI tako, da zaženete naslednji ukaz:

npm install -g @angular/cli

Nato ustvarite nov projekt Angular tako, da zaženete ta ukaz:

ng new my-app

Ko ustvarite projekt, se pomaknite do imenika projekta in odprite aplikacijo v svojem IDE.

Ustvarite cev po meri

Zdaj, ko ste nastavili svojo aplikacijo Angular, je naslednja stvar, da ustvarite cev po meri. Če želite ustvariti cev po meri, morate ustvariti novo s pomočjo Angular CLI.

Če želite to narediti, zaženite naslednji ukaz v imeniku vaše aplikacije na terminalu:

ng generate pipe customPipe

Ta ukaz bo ustvaril dve datoteki z imenom custom-pipe.pipe.ts in custom-pipe.pipe.spec.ts v src/app imenik. Datoteka custom-pipe.pipe.ts je datoteko TypeScript ki vsebuje kodo za definiranje vaše cevi po meri. Uporabili boste custom-pipe.pipe.spec.ts za izvajanje testov na cevi po meri.

V custom-pipe.pipe.ts datoteko, boste našli te vrstice kode:

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

Ta blok kode uvozi Cev dekorater in PipeTransform vmesnik iz @kotno/jedro modul. Dekorater cevi definira metapodatke za cev, razred cevi pa implementira vmesnik PipeTransform.

V CustomPipePipe razreda izvajate PipeTransform vmesnik, ki zahteva implementacijo transformirati metoda. Metoda transformacije je odgovorna za pretvorbo vhodne vrednosti.

The transformirati metoda ima dva parametra, vrednost in args. Parameter vrednosti predstavlja vrednost pretvorbe cevi, parameter args pa izbirne parametre, ki jih boste morda želeli dodati.

Zdaj ste razumeli okvirno osnovo custom-pipe.pipe.ts zamenjajte zgornji kodni blok s to kodo:

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

V tem kodnem bloku je transformirati metoda prevzame vrednost parameter vrste vrvica kot argument in vrne matriko nizov. Metoda transformacije razdeli vhodni niz v matriko posameznih znakov z uporabo razdeliti in vrne nastalo matriko.

Integracija cevi po meri v vašo aplikacijo

Uspešno ste ustvarili svojo cev po meri in jo lahko zdaj uporabite v svojih predlogah Angular. Preden uporabite cev po meri v vaši aplikaciji, jo uvozite in prijavite v svoji app.module.ts mapa. Če želite to narediti, zamenjajte kodo v app.module.ts z naslednjim:

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

Zdaj lahko uporabite cev v svojih predlogah. Odprite app.component.html datoteko in dodajte naslednjo kodo:

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

V tem primeru uporabite CustomPipe cev za preoblikovanje niza 'jabolko' v matriko nizov.

Preizkusite svojo cev po meri

Če želite videti svojo cev po meri v akciji, zaženite razvojni strežnik Angular. To lahko storite tako, da zaženete naslednji terminalski ukaz:

ng serve

Odprite brskalnik in se pomaknite do http://localhost: 4200. Na strani bi morali videti prikazan transformirani niz:

Popeljite svoje aplikacije Angular na naslednjo raven

Cevi so zmogljivo orodje Angular, ki vam omogoča preoblikovanje in oblikovanje podatkov v vaši aplikaciji. Ustvarite lahko cevi po meri, ki ustrezajo vašim specifičnim potrebam in naredijo vašo aplikacijo Angular bolj dinamično.

Drug način, da svoje aplikacije Angular dvignete na višjo raven, je razumevanje usmerjanja v Angularju. Usmerjanje je ključni koncept, ki vam omogoča nadzor nad tem, kako uporabniki krmarijo po vaši aplikaciji. Z razumevanjem usmerjanja lahko ustvarite enostranske aplikacije, ki so bolj uporabniku prijazne in učinkovite.