Kako stvoriti prilagođene cijevi u Angularu

Cijevi su moćna Angular značajka koja vam omogućuje transformaciju i formatiranje podataka u vašoj aplikaciji. Oni pružaju prikladan način za rukovanje podacima prije nego što ih se prikaže korisniku, čineći vašu aplikaciju dinamičnijom i lakšom za korištenje.

Angular nudi niz ugrađenih cijevi kao što su DatePipe, CurrencyPipe i UpperCasePipe. Zajedno s ugrađenim cijevima koje nudi Angular, možete izraditi prilagođene cijevi za transformaciju podataka na bilo koji način koji vam je potreban.

Postavite svoj Angular projekt

Prije izrade prilagođenih cijevi, provjerite jeste li razumjeti cijevi u Angularu. Da biste mogli postaviti Angular projekt, provjerite imate li Angular CLI instaliran na vašem računalu. Možete ga instalirati s npm (Upravitelj paketa čvorova).

Instalirajte Angular CLI pokretanjem sljedeće naredbe:

npm install -g @angular/cli

Zatim izradite novi Angular projekt pokretanjem ove naredbe:

ng new my-app

Nakon što ste izradili projekt, idite u direktorij vašeg projekta i otvorite svoju aplikaciju na vašem IDE-u.

Stvorite prilagođenu cijev

Sada kada ste postavili svoju Angular aplikaciju, sljedeća stvar koju trebate učiniti je stvoriti prilagođenu cijev. Da biste stvorili prilagođenu cijev, morate generirati novu koristeći Angular CLI.

Da biste to učinili, pokrenite sljedeću naredbu u imeniku svoje aplikacije na terminalu:

ng generate pipe customPipe

Ova naredba će generirati dvije datoteke pod nazivom custom-pipe.pipe.ts i custom-pipe.pipe.spec.ts u src/aplikacija imenik. Datoteka custom-pipe.pipe.ts je TypeScript datoteku koji sadrži kod za definiranje vaše prilagođene cijevi. Koristit ćete custom-pipe.pipe.spec.ts za izvođenje testova na prilagođenoj cijevi.

u custom-pipe.pipe.ts datoteku, pronaći ćete ove retke koda:

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

Ovaj blok koda uvozi Cijev dekorater i PipeTransform sučelje iz @kutna/jezgra modul. Pipe dekorater definira metapodatke za cijev, a klasa cijevi implementira sučelje PipeTransform.

u CustomPipePipe klase, implementirate PipeTransform sučelje, koje zahtijeva implementaciju transformirati metoda. Metoda transformacije odgovorna je za transformaciju ulazne vrijednosti.

The transformirati metoda uzima dva parametra, vrijednost i args. Parametar vrijednosti predstavlja vrijednost transformacije cijevi, a parametar args predstavlja izborne parametre koje možete dodati.

Sada ste razumjeli osnovni koncept custom-pipe.pipe.ts datoteku, zamijenite gornji blok koda ovim kodom:

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

U ovom bloku koda, transformirati metoda uzima vrijednost parametar tipa niz kao argument i vraća niz nizova. Metoda transformacije dijeli ulazni niz u niz pojedinačnih znakova pomoću podjela metoda i vraća rezultirajući niz.

Integracija prilagođene cijevi u vašu aplikaciju

Uspješno ste izradili svoju prilagođenu cijev i sada je možete koristiti u svojim Angular predlošcima. Prije upotrebe prilagođene cijevi u svojoj aplikaciji, uvezite je i deklarirajte u svojoj app.module.ts datoteka. Da biste to učinili, zamijenite kôd u app.module.ts sljedećim:

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

Sada možete koristiti cijev u svojim predlošcima. Otvori app.component.html datoteku i dodajte sljedeći kod:

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

U ovom primjeru koristite CustomPipe cijev za transformaciju niza 'jabuka' u niz nizova.

Testirajte svoju prilagođenu cijev

Da biste vidjeli svoju prilagođenu cijevi na djelu, pokrenite Angular razvojni poslužitelj. To možete učiniti pokretanjem sljedeće naredbe terminala:

ng serve

Otvorite svoj preglednik i idite na http://localhost: 4200. Trebali biste vidjeti transformirani niz prikazan na stranici:

Podignite svoje Angular aplikacije na višu razinu

Cijevi su moćan Angular alat koji vam omogućuje transformaciju i formatiranje podataka u vašoj aplikaciji. Možete izraditi prilagođene cijevi koje odgovaraju vašim specifičnim potrebama i učiniti vašu Angular aplikaciju dinamičnijom.

Još jedan način da podignete svoje Angular aplikacije na višu razinu je razumijevanje rutiranja u Angularu. Usmjeravanje je ključni koncept koji vam omogućuje kontrolu načina na koji se korisnici kreću vašom aplikacijom. Razumijevanjem usmjeravanja možete izraditi jednostrane aplikacije koje su jednostavnije za korištenje i učinkovitije.