Cum se creează conducte personalizate în Angular

Conductele sunt o caracteristică Angular puternică care vă permite să transformați și să formatați datele din aplicația dvs. Acestea oferă o modalitate convenabilă de a manipula datele înainte de a le afișa utilizatorului, făcând aplicația dvs. mai dinamică și mai ușor de utilizat.

Angular oferă o varietate de conducte încorporate, cum ar fi DatePipe, CurrencyPipe și UpperCasePipe. Împreună cu conductele încorporate oferite de Angular, puteți crea conducte personalizate pentru a transforma datele în orice mod aveți nevoie.

Configurați-vă proiectul Angular

Înainte de a crea conducte personalizate, asigurați-vă că înțelegeți conductele în Angular. Pentru a putea configura un proiect Angular, asigurați-vă că aveți instalat CLI-ul Angular pe mașina dvs. Il poti instala cu npm (Manager de pachete de noduri).

Instalați Angular CLI rulând următoarea comandă:

npm install -g @angular/cli

Apoi, creați un nou proiect Angular rulând această comandă:

ng new my-app

După ce ați creat proiectul, navigați la directorul proiectului și deschideți aplicația pe IDE.

Creați o conductă personalizată

Acum că v-ați configurat aplicația Angular, următorul lucru de făcut este să creați o conductă personalizată. Pentru a crea o conductă personalizată, trebuie să generați una nouă utilizând CLI-ul Angular.

Pentru a face acest lucru, rulați următoarea comandă în directorul aplicației dvs. de pe terminal:

ng generate pipe customPipe

Această comandă va genera două fișiere numite custom-pipe.pipe.ts și custom-pipe.pipe.spec.ts în src/app director. Fișierul custom-pipe.pipe.ts este un fișier TypeScript care conține codul pentru definirea conductei personalizate. Veți folosi custom-pipe.pipe.spec.ts pentru a rula teste pe conducta personalizată.

În custom-pipe.pipe.ts fișier, veți găsi aceste linii de cod:

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

Acest bloc de cod importă țeavă decorator și cel PipeTransform interfata de la @unghiular/nucleu modul. Decoratorul Pipe definește metadatele pentru conductă, iar clasa pipe implementează interfața PipeTransform.

În CustomPipePipe clasa, implementați PipeTransform interfață, care necesită implementarea transforma metodă. Metoda transform este responsabilă pentru transformarea valorii de intrare.

The transforma metoda ia doi parametri, valoare și argumente. Parametrul value reprezintă valoarea de transformare a conductei, iar parametrul args reprezintă parametrii opționali pe care doriți să îi adăugați.

Acum ați înțeles planul general al custom-pipe.pipe.ts fișier, înlocuiți blocul de cod de mai sus cu acest cod:

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

În acest bloc de cod, transforma metoda ia valoare parametru de tip şir ca argument și returnează o matrice de șiruri de caractere. Metoda transform împarte șirul de intrare într-o matrice de caractere individuale folosind Despică metoda și returnează tabloul rezultat.

Integrarea conductei personalizate în aplicația dvs

Ați creat cu succes conducta personalizată și acum o puteți utiliza în șabloanele dvs. Angular. Înainte de a utiliza conducta personalizată în aplicația dvs., importați și declarați-o în aplicația dvs aplicație.modul.ts fişier. Pentru a face acest lucru, înlocuiți codul din app.module.ts cu următoarele:

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

Acum puteți folosi conducta în șabloanele dvs. Deschide app.component.html fișier și adăugați următorul cod:

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

În acest exemplu, utilizați CustomPipe teava pentru a transforma sfoara 'măr' într-o matrice de șiruri.

Testați-vă conducta personalizată

Pentru a vedea conducta personalizată în acțiune, rulați serverul de dezvoltare Angular. Puteți face acest lucru rulând următoarea comandă de terminal:

ng serve

Deschideți browserul și navigați la http://localhost: 4200. Ar trebui să vedeți șirul transformat afișat pe pagină:

Du-ți aplicațiile unghiulare la următorul nivel

Țevile sunt un instrument puternic Angular care vă permite să transformați și să formatați datele din aplicația dvs. Puteți crea conducte personalizate pentru a se potrivi nevoilor dvs. specifice și a face aplicația dvs. Angular mai dinamică.

O altă modalitate de a vă duce aplicațiile Angular la nivelul următor este să înțelegeți rutarea în Angular. Rutarea este un concept cheie care vă permite să controlați modul în care utilizatorii navighează în aplicația dvs. Înțelegând rutarea, puteți construi aplicații cu o singură pagină care sunt mai ușor de utilizat și mai eficiente.