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

Pipes in Angular är en av fraserna du kommer att stöta på ofta när du bygger användargränssnitt med Angular. Vad är de och hur fungerar de?

Angular är bland de 5 mest önskade webbramverken och teknologierna baserade på StackOverflow-undersökning.

Den modulära arkitekturen gör Angular till en älskling för utvecklare, vilket gör att de kan dela upp applikationen i små återanvändbara komponenter. En modulär kodbas är lätt att underhålla och förbättrar också samarbetet. Tvåvägsdatabindningen, kompatibiliteten över webbläsare och det stora ekosystemet och gemenskapen är andra anledningar till att Angular är bland de bästa front-end-ramverken.

Den här artikeln diskuterar vad Pipes in Angular är, deras användningsfall, olika typer av inbyggda Pipes och hur man skapar anpassade Pipes i Angular.

Vad är rör i Angular?

Pipes är en funktion i Angular som transformerar och formaterar data i en applikation. Pipes tar helt enkelt ett värde som indata och returnerar ett transformerat värde som output. Transformationen varierar, och det kan vara så enkelt som att omvandla en valuta eller ett datum eller att sortera eller filtrera objekt från en lista.

Pipes är designade för att förbättra användarupplevelsen när de transformerar data och returnerar värden som användarna enkelt kan konsumera och interagera med. Rör i Angular kan antingen vara inbyggda eller specialanpassade. Oavsett typ är det här några av anledningarna till varför du bör använda rör i Angular:

  • Transform data: Detta är den huvudsakliga användningen av Pipes i Angular. Pipes är till för att transformera data så att det som visas för användarna är läsbart.
  • Kodläsbarhet och underhållbarhet: De flesta applikationer byggs genom samarbete. Som sådan måste du se till att de andra teammedlemmarna förstår din kod. Pipes gör din kod mer kortfattad och lätt att underhålla.
  • Lokalisering: Du kan lokalisera data för att passa målmarknaden. Det finns till exempel olika datumformat. Således kan du använda DatePipe för att formatera data för att passa användarnas språk.
  • Sortera och filtrera data: Du kan använda OrderPipe eller FilterPipe för att sortera eller filtrera dina data.

Typer av inbyggda rör i vinkel

Angular har olika inbyggda rör utformade för olika ändamål. Det här är exempel på några som du kommer att möta i din utvecklingsresa.

  • PercentPipe: Detta är pipen som ska användas när du vill omvandla ett tal till en procentsträng.
  • DatePipe: Detta är pipen som ska användas för att formatera ett datumvärde baserat på lokala regler.
  • LowerCasePipe: Förvandla all din text till din gemener med denna pipe.
  • UpperCasePipe: Du kan använda denna pipe när du vill ändra all din text till versaler.
  • CurrencyPipe: Det är ett perfekt val när du vill ändra ett nummer till en valutasträng baserat på lokala regler.
  • DecimalPipe: Detta rör använder lokala regler för att omvandla ett tal till en sträng med en decimalkomma.

Skapa anpassade rör i Angular

Vi har sett inbyggda rör och deras användningsfall. Angular stöder dock anpassade rör. Sådana rör är viktiga när man vill åstadkomma något de inbyggda rören inte kan åstadkomma. Sådana rör låter dig utöka funktionaliteten för din applikation.

Förutsättningar

Innan du börjar bygga anpassade rör i Angular behöver du följande:

  • Node.js runtime-miljö för din Angular-applikation. Du kan ladda ner Node.js om du inte har det.
  • Förståelse för hur Angular fungerar
  • Vinkel CLI för att skapa din applikation och köra olika kommandon. Du kan installera det med detta kommando;

npm installera -g @angular/cli

Följ dessa steg för att bygga ett anpassat rör i Angular:

#1. Skapa ett nytt Angular-projekt. Du kan använda det här kommandot för att komma igång:

ng nya rör

#2. Ändra katalogen till din skapade app och öppna den i din favoritkodredigerare. Jag använder VsCode. Du kan köra dessa kommandon

cd-rör && kod .

Din projektmapp kommer att likna denna;

#3. Skapa ett anpassat rör. Du kan använda det här kommandot för att skapa en ny anpassad pipe:

ng generera rör anpassat rör

Om du kontrollerar din projektmapp kommer du att notera att dessa två filer har skapats:

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

src/app/custom-pipe.pipe.ts

#4. Definiera rörets logik

Öppna custom-pipe.pipe.ts-filen så hittar du den här koden:

Vi kan nu skapa en enkel logik där vårt anpassade rör läggs till en sträng.

Du kan ändra innehållet i din fil till att vara;

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

#5. Registrera det anpassade röret. Öppna filen app.module.ts och kontrollera att du har @NgModule och sedan dekorationer.

Bekräfta att den här filen har 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 innehåll och lägg till den här raden;

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

Kör servern med detta kommando;

ng tjäna

Detta är vad som kommer att visas i din webbläsare;

Hur man kedjer rör i kantigt

Pipe chaining låter dig utföra flera operationer med ett enda uttryck. Vi använder röroperatören ( | ) för att kombinera olika rör i Angular.

Vi kan kedja rör av följande skäl:

  • Kedjerör främjar kodåteranvändbarhet och modularitet: Du kan ställa in varje rör för att utföra en specifik transformation som du kan återanvända i din applikation.
  • Behåll ren kod: Kedjemallar låter dig hålla din kod kortfattad, ren och läsbar.
  • Anpassning: Pipe chaining låter dig kombinera anpassade och inbyggda rör och anpassa dem för att passa dina behov.
  • Komplexa transformationer: Istället för att ställa in ett rör för att utföra flera transformationer, kan du ställa in flera rör för att uppnå komplexa transformationer.

Du kan kedja ditt anpassade rör med ett annat eller ett inbyggt rör. Jag kan kedja röret vi skapade tidigare customPipe med ett inbyggt rör med små bokstäver. Så här kan vi göra det:

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

Rena vs. orena rör

Det finns två typer av rör i Angular: rena och orena rör

Rena rör

Rör i Angular är rena som standard. Ett rent rör förväntas ge samma effekt för samma ingång. Ett sådant rör förväntas vara deterministiskt och tillståndslöst.

Angulars förändringsdetekteringsmekanism optimerar automatiskt rena rör. Angular kör inte om rörtransformationen om inte ingången till ett rent rör ändras.

Så här förklarar du en pipa som ren;

@Pipe({
  name: 'uppercase',
  pure: true

})

export class UppercasePipe {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Som du kan se har vi satt @Rördekoratörens rena egenskap till sann.

Orena rör

Ett orent rör kommer att exekveras varje gång Angular upptäcker en förändring. En sådan förändring behöver inte vara från ingångarna. Orena rör passar situationer som kräver åtkomst till appens nuvarande tillstånd. Att komma åt en databas eller göra en HTTP-förfrågan är perfekta exempel på var du kan använda orena rör.

Detta är ett exempel på ett orent rör:

@Pipe({
  name: 'sort',
  pure: false
})

export class SortPipe {
  transform(array: any[]): any[] {
    return array.sort();
  }
}

Som du kan se har vi satt @Pipe-dekoratörens rena egenskap till att falskt göra vår pipa oren.

Skapa rör i vinkel: bästa praxis

  • camelCase your pipes: Om du har noterat, har jag döpt min pipe customPipe. Använd alltid denna metod om din pipe har mer än ett ord.
  • Testa dina rör: Att skapa ett rör garanterar inte att det kommer att fungera. Testa alltid dina rör för att säkerställa att de fungerar som förväntat. Du kan automatisera denna process med hjälp av olika bibliotek.
  • Undvik komplexa pipes: Du kanske vill att en pipe ska utföra mer än en åtgärd. Detta är dock inte ett bra tillvägagångssätt, och bästa praxis är att skapa olika rör för att utföra olika åtgärder.
  • Använd rena rör: Ett rent rör kommer alltid att returnera samma utgång från samma ingång. Angular kan cacheresultat för rena rör, vilket resulterar i en förbättring av prestanda och svarstid.

Vanliga frågor

Varför behöver vi Pipes in Angular?

Pipes transformerar och formaterar data i en applikation. Pipes tar ett värde som indata och returnerar ett transformerat värde som output. Transformationen varierar, och det kan vara så enkelt som att omvandla en valuta eller ett datum eller att sortera eller filtrera objekt från en lista.

Vad är ett anpassat rör?

Detta är en användardefinierad pipe som du skapar för att utföra anpassade transformationer. Du kan kombinera ett anpassat rör med inbyggda rör genom rörkedja.

Ge exempel på inbyggda rör i Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe och PercentPipe

Vad är rörkedja?

Rörkedja är processen att kombinera flera kedjor. Pipe chaining låter dig utföra flera operationer med ett enda uttryck. Vi använder röroperatören ( | ) för att kombinera olika rör i Angular. Du kan kedja anpassade rör med andra eller kedja dem med inbyggda rör

Slutsats

Vi tror att du nu kan beskriva rör i din nästa intervju, eftersom detta är en vanlig fråga i Angular vanliga frågor. Vi har också tagit upp de olika inbyggda rören och hur man skapar anpassade rör i Angular.

Anpassade rör kommer att vara användbara när du vill möta specifika behov eller göra din applikation mer dynamisk. Du måste dock förstå hur Angular fungerar under huven för att skapa och använda anpassade rör.

Du kan också utforska några Angular UI-bibliotek för att skapa en användarupplevelse i världsklass.