Ako vytvoriť vlastné potrubia v Angular

Rúry sú výkonnou funkciou Angular, ktorá vám umožňuje transformovať a formátovať údaje vo vašej aplikácii. Poskytujú pohodlný spôsob manipulácie s údajmi pred ich zobrazením používateľovi, vďaka čomu je vaša aplikácia dynamickejšia a užívateľsky príjemnejšia.

Angular ponúka množstvo vstavaných potrubí, ako sú DatePipe, CurrencyPipe a UpperCasePipe. Spolu so vstavanými potrubiami, ktoré Angular ponúka, môžete vytvárať vlastné potrubia na transformáciu údajov akýmkoľvek spôsobom, ktorý potrebujete.

Nastavte si svoj uhlový projekt

Pred vytvorením vlastných potrubí sa uistite, že ste pochopiť potrubia v Angular. Aby ste mohli nastaviť projekt Angular, uistite sa, že máte na svojom počítači nainštalované rozhranie Angular CLI. Môžete ho nainštalovať pomocou npm (Správca balíkov uzlov).

Nainštalujte Angular CLI spustením nasledujúceho príkazu:

npm install -g @angular/cli

Ďalej vytvorte nový Angular projekt spustením tohto príkazu:

ng new my-app

Po vytvorení projektu prejdite do adresára projektu a otvorte aplikáciu vo svojom IDE.

Vytvorte si vlastnú fajku

Teraz, keď ste nastavili aplikáciu Angular, ďalšia vec, ktorú musíte urobiť, je vytvoriť si vlastnú rúrku. Ak chcete vytvoriť vlastnú rúrku, musíte vygenerovať novú pomocou Angular CLI.

Ak to chcete urobiť, spustite nasledujúci príkaz v adresári vašej aplikácie na termináli:

ng generate pipe customPipe

Tento príkaz vygeneruje dva súbory s názvom custom-pipe.pipe.ts a custom-pipe.pipe.spec.ts v src/aplikácia adresár. Súbor custom-pipe.pipe.ts je súbor TypeScript ktorý obsahuje kód na definovanie vášho vlastného potrubia. Na spustenie testov na prispôsobenom potrubí použijete súbor custom-pipe.pipe.spec.ts.

V custom-pipe.pipe.ts súbor, nájdete tieto riadky kódu:

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

Tento blok kódu importuje súbor Rúra dekoratér a PipeTransform rozhranie z @angular/core modul. Dekorátor potrubia definuje metadáta pre potrubie a trieda potrubia implementuje rozhranie PipeTransform.

V CustomPipePipe triedy, implementujete PipeTransform rozhranie, ktoré vyžaduje implementáciu transformovať metóda. Transformačná metóda je zodpovedná za transformáciu vstupnej hodnoty.

The transformovať metóda má dva parametre, hodnotu a args. Parameter value predstavuje transformačnú hodnotu potrubia a parameter args predstavuje voliteľné parametre, ktoré možno budete chcieť pridať.

Teraz ste pochopili podstatu custom-pipe.pipe.ts súbor, nahraďte blok kódu vyššie týmto kódom:

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

V tomto bloku kódu je transformovať metóda berie hodnotu parameter typu reťazec ako argument a vráti pole reťazcov. Metóda transform rozdeľuje vstupný reťazec na pole jednotlivých znakov pomocou rozdeliť a vráti výsledné pole.

Integrácia vlastného potrubia do vašej aplikácie

Úspešne ste vytvorili vlastnú rúrku a teraz ju môžete použiť vo svojich Angular šablónach. Pred použitím vlastného potrubia vo svojej aplikácii ho importujte a deklarujte vo svojom app.module.ts súbor. Ak to chcete urobiť, nahraďte kód v app.module.ts nasledujúcim:

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

Teraz môžete použiť potrubie vo svojich šablónach. Otvor app.component.html súbor a pridajte nasledujúci kód:

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

V tomto príklade použijete CustomPipe potrubie na premenu struny "jablko" do poľa reťazcov.

Otestujte si vlastnú fajku

Ak chcete vidieť svoje vlastné potrubie v akcii, spustite vývojový server Angular. Môžete to urobiť spustením nasledujúceho príkazu terminálu:

ng serve

Otvorte prehliadač a prejdite na http://localhost: 4200. Na stránke by ste mali vidieť transformovaný reťazec:

Posuňte svoje uhlové aplikácie na ďalšiu úroveň

Rúry sú výkonný nástroj Angular, ktorý vám umožňuje transformovať a formátovať údaje vo vašej aplikácii. Môžete si vytvoriť vlastné potrubia, ktoré budú vyhovovať vašim špecifickým potrebám a urobiť vašu aplikáciu Angular dynamickejšou.

Ďalším spôsobom, ako posunúť svoje aplikácie Angular na ďalšiu úroveň, je pochopiť smerovanie v Angular. Smerovanie je kľúčový koncept, ktorý vám umožňuje ovládať, ako používatelia navigujú vo vašej aplikácii. Pochopením smerovania môžete vytvárať jednostránkové aplikácie, ktoré sú užívateľsky prívetivejšie a efektívnejšie.