Hur man skapar anpassade rör i Angular för elegant datavisning

av

I utvecklingen av gränssnitt med Angular, är ”pipes” ett begrepp du ofta kommer stöta på. Men vad är de egentligen och hur fungerar de?

Angular rankas bland de fem mest populära webbramverken och teknikerna, vilket framgår av en undersökning från StackOverflow.

Den modulära designen gör Angular till en favorit bland utvecklare, eftersom den möjliggör uppdelning av applikationen i återanvändbara komponenter. Denna modulära struktur förenklar underhållet och främjar samarbete. Andra fördelar med Angular inkluderar tvåvägsdatabindning, kompatibilitet mellan olika webbläsare samt ett brett ekosystem och en engagerad community.

Denna artikel utforskar vad ”pipes” är i Angular, deras användningsområden, de olika typerna av inbyggda ”pipes” och hur du skapar dina egna.

Vad är ”pipes” i Angular?

Pipes är en funktion i Angular som används för att transformera och formatera data. En ”pipe” tar ett värde som input och returnerar ett modifierat värde som output. Transformationen kan vara allt från att konvertera valutor och datum till att sortera eller filtrera objekt i en lista.

Pipes är avsedda att förbättra användarupplevelsen genom att presentera data på ett sätt som är enkelt att konsumera och interagera med. I Angular finns både inbyggda och anpassade ”pipes”. Oavsett typ, finns det flera goda skäl att använda ”pipes”:

  • Datatransformation: Detta är grundfunktionen för ”pipes” i Angular. De omvandlar data så att den visas på ett lättförståeligt sätt för användaren.
  • Förbättrad kodläsbarhet och underhåll: Eftersom de flesta applikationer utvecklas i team, är det viktigt att koden är lätt att förstå för alla. ”Pipes” gör koden mer kompakt och enkel att underhålla.
  • Lokalisering: Du kan anpassa data för att passa olika marknader. Till exempel kan datumformat variera beroende på region. Med hjälp av `DatePipe` kan du formatera datum för att anpassa till användarens språk.
  • Sortering och filtrering: Med hjälp av `OrderPipe` eller `FilterPipe` kan du enkelt sortera eller filtrera din data.

Typer av inbyggda ”pipes” i Angular

Angular erbjuder flera inbyggda ”pipes” för olika ändamål. Här är några exempel som du kommer att stöta på under din utvecklingsresa:

  • PercentPipe: Används för att konvertera ett numeriskt värde till en procentsträng.
  • DatePipe: Används för att formatera ett datumvärde baserat på lokala inställningar.
  • LowerCasePipe: Omvandlar all text till gemener.
  • UpperCasePipe: Omvandlar all text till versaler.
  • CurrencyPipe: Omvandlar ett numeriskt värde till en valutasträng enligt lokala regler.
  • DecimalPipe: Omvandlar ett numeriskt värde till en sträng med decimaler baserat på lokala inställningar.

Skapa anpassade ”pipes” i Angular

Utöver de inbyggda ”pipes” stöder Angular även anpassade ”pipes”. Dessa är användbara när du behöver utföra transformationer som de inbyggda ”pipes” inte klarar av, vilket ger dig möjlighet att utöka funktionaliteten i din applikation.

Förutsättningar

Innan du börjar skapa anpassade ”pipes” i Angular, behöver du följande:

  • En Node.js runtime-miljö för din Angular-applikation. Du kan ladda ner Node.js om du inte redan har det.
  • Grundläggande förståelse för hur Angular fungerar.
  • Angular CLI för att skapa och hantera din applikation. Installera det med kommandot:

npm install -g @angular/cli

Följ dessa steg för att skapa en anpassad ”pipe” i Angular:

#1. Skapa ett nytt Angular-projekt med kommandot:

ng new pipes

#2. Navigera till den nyligen skapade mappen och öppna den i din favoritkodredigerare. Till exempel med VS Code:

cd pipes && code .

Din projektstruktur kommer att se ut ungefär så här:

#3. Skapa en anpassad ”pipe” med kommandot:

ng generate pipe custom-pipe

Detta skapar två nya filer i din projektstruktur:

src/app/custom-pipe.pipe.spec.ts

src/app/custom-pipe.pipe.ts

#4. Definiera logiken för din ”pipe”.

Öppna filen `custom-pipe.pipe.ts`. Den initiala koden ser ut ungefär så här:

Nu ska vi skapa en enkel logik där vår ”pipe” delar upp en sträng i en array av tecken.

Ersätt innehållet i `custom-pipe.pipe.ts` med följande:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
    transform(value: string): string[] {
        return value.split('');
    }
}

#5. Registrera din anpassade ”pipe”. Öppna `app.module.ts` och kontrollera att `@NgModule` och deklarationerna är korrekt konfigurerade.

Verifiera att filen innehåller denna kod:

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]
})
export class AppModule { }

#6. Öppna `app.component.html`, ta bort allt befintligt innehåll och lägg till följande rad:

<header>{{ '12345' | customPipe }}</header>

Starta utvecklingsservern med kommandot:

ng serve

Detta är vad som visas i webbläsaren:

Hur man kedjar ”pipes” i Angular

Med pipe chaining kan du utföra flera transformationer i ett enda uttryck. Vi använder pipe-operatorn ( `|` ) för att kombinera olika ”pipes” i Angular.

Här är några skäl till varför du kan vilja kedja ”pipes”:

  • Återanvändbarhet och modularitet: Varje ”pipe” kan utföra en specifik transformation som kan återanvändas i hela applikationen.
  • Ren kod: Kedjning av ”pipes” ger en mer kompakt, ren och lättläst kod.
  • Anpassning: Du kan kombinera anpassade och inbyggda ”pipes” för att skapa skräddarsydda transformationer.
  • Komplexa transformationer: Istället för att bygga en ”pipe” som utför flera transformationer, kan du kombinera flera ”pipes” för att uppnå komplexa resultat.

Du kan kedja din anpassade ”pipe” med andra anpassade eller inbyggda ”pipes”. Till exempel kan vi kombinera vår tidigare `customPipe` med `lowercase` för att konvertera resultatet till gemener:

<p>{{ dataValue | customPipe | lowercase }}</p>

Rena vs. Orena ”pipes”

I Angular finns det två typer av ”pipes”: rena och orena.

Rena ”pipes”

”Pipes” i Angular är som standard rena. En ren ”pipe” förväntas ge samma resultat för samma indata. Det innebär att den ska vara deterministisk och tillståndslös.

Angulars detekteringsmekanism för förändringar optimerar automatiskt rena ”pipes”. En transformation med en ren ”pipe” körs inte om om dess indata inte har ändrats.

Så här definierar du en ”pipe” som ren:

@Pipe({
    name: 'uppercase',
    pure: true
})
export class UppercasePipe {
    transform(value: string): string {
        return value.toUpperCase();
    }
}

Som du kan se sätter vi `@Pipe`-dekoratörens `pure`-egenskap till `true`.

Orena ”pipes”

En oren ”pipe” körs varje gång Angular upptäcker en förändring. Denna förändring behöver inte vara en ändring i själva indatan. Orena ”pipes” är användbara i situationer där du behöver tillgång till applikationens aktuella tillstånd, till exempel när du gör databasförfrågningar eller HTTP-anrop.

Ett exempel på en oren ”pipe”:

@Pipe({
    name: 'sort',
    pure: false
})
export class SortPipe {
    transform(array: any[]): any[] {
        return array.sort();
    }
}

Här har vi satt `@Pipe`-dekoratörens `pure`-egenskap till `false`, vilket gör ”pipen” oren.

Skapa ”pipes” i Angular: Bästa praxis

  • Använd camelCase för ”pipes”: Som du märkt har jag döpt min ”pipe” till `customPipe`. Använd alltid denna konvention för ”pipes” som består av mer än ett ord.
  • Testa dina ”pipes”: Bara för att du skapat en ”pipe” betyder det inte att den fungerar korrekt. Se alltid till att testa dina ”pipes” för att säkerställa att de fungerar som förväntat. Du kan automatisera detta med olika testbibliotek.
  • Undvik komplexa ”pipes”: Det kan vara frestande att låta en ”pipe” utföra flera operationer, men det är bäst att skapa flera olika ”pipes” för olika uppgifter.
  • Använd rena ”pipes”: En ren ”pipe” kommer alltid att ge samma output för samma input. Angular kan cache:a resultatet av rena ”pipes”, vilket ger en förbättring i prestanda och svarstider.

Vanliga frågor

Varför behöver vi ”pipes” i Angular?

”Pipes” transformerar och formaterar data i en applikation. De tar ett värde som indata och returnerar ett modifierat värde som output. Transformationen kan vara allt från att konvertera valutor och datum till att sortera eller filtrera objekt i en lista.

Vad är en anpassad ”pipe”?

Detta är en användardefinierad ”pipe” som du skapar för att utföra anpassade transformationer. Du kan kombinera anpassade ”pipes” med inbyggda ”pipes” med hjälp av pipe chaining.

Ge exempel på inbyggda ”pipes” i Angular.

`DatePipe`, `UpperCasePipe`, `LowerCasePipe`, `CurrencyPipe`, `DecimalPipe` och `PercentPipe`.

Vad är pipe chaining?

Pipe chaining är processen att kombinera flera ”pipes”. Det tillåter dig att utföra flera transformationer med ett enda uttryck. Pipe-operatorn ( `|` ) används för att kombinera olika ”pipes” i Angular. Du kan kedja anpassade ”pipes” med varandra eller med inbyggda ”pipes”.

Slutsats

Vi hoppas att du nu har en bra förståelse för ”pipes” och kan förklara det i din nästa intervju, eftersom det är en vanlig fråga i Angular-relaterade intervjuer. Vi har även täckt de inbyggda ”pipes” samt hur man skapar egna.

Anpassade ”pipes” är mycket användbara när du behöver skräddarsy funktionaliteten i din applikation. Det är dock viktigt att ha en god förståelse för hur Angular fungerar i grunden för att kunna skapa och använda dessa på ett effektivt sätt.

Du kan även utforska olika UI-bibliotek för Angular för att skapa en enastående användarupplevelse.