Jak tworzyć niestandardowe potoki w Angular

Pipes to potężna funkcja Angular, która pozwala przekształcać i formatować dane w aplikacji. Zapewniają one wygodny sposób manipulowania danymi przed wyświetleniem ich użytkownikowi, dzięki czemu aplikacja jest bardziej dynamiczna i przyjazna dla użytkownika.

Angular zapewnia szereg predefiniowanych potoków znanych jako “wbudowane potoki”, które obejmują takie elementy jak DatePipe, CurrencyPipe i UpperCasePipe. Dodatkowo, deweloperzy mają elastyczność w projektowaniu własnych, dostosowanych do ich potrzeb potoków, które umożliwiają im manipulowanie informacjami zgodnie z określonymi wymaganiami.

Konfiguracja projektu Angular

Aby skutecznie tworzyć spersonalizowane potoki w ramach frameworka Angular, konieczne jest kompleksowe zrozumienie mechanizmu potoków. Przed kontynuowaniem upewnij się, że jesteś zaznajomiony z implementacją pipe w Angular. Warunkiem wstępnym do skonfigurowania projektu Angular jest zainstalowanie interfejsu wiersza poleceń (CLI) Angular w systemie. Można to osiągnąć za pomocą Menedżera pakietów Node (npm).

Aby zainstalować Angular Command Line Interface (CLI), wykonaj następującą instrukcję:

 npm install -g @angular/cli

Aby zainicjować projekt Angular przy użyciu określonej wersji frameworka i skonfigurować środowisko do programowania, wykonaj następujące kroki w terminalu lub wierszu polecenia:

 ng new my-app

Po utworzeniu projektu przejdź do katalogu zawierającego projekt w zintegrowanym środowisku programistycznym (IDE) i uruchom w nim aplikację.

Tworzenie niestandardowej rury

Aby opracować aplikację Angular, konieczne jest ustanowienie podstaw poprzez utworzenie projektu i skonfigurowanie wszelkich wymaganych zależności. Po zakończeniu tego procesu, kolejnym krokiem jest stworzenie niestandardowego filtra poprzez wykorzystanie interfejsu wiersza poleceń Angular (CLI). Pozwala to na stworzenie unikalnego komponentu, który można zintegrować z szablonami aplikacji w celu wykonywania określonych zadań lub manipulowania danymi w określony sposób.

Wykonaj następującą instrukcję w odpowiednim katalogu projektu za pomocą interfejsu terminala:

 ng generate pipe customPipe

Wykonanie tego polecenia spowoduje utworzenie dwóch plików, a mianowicie “custom-pipe.pipe.ts” i “custom-pipe.pipe.spec.ts”, w folderze “src/app”. Pierwszy z nich jest plikiem TypeScript, który zawiera implementację niestandardowej rury, podczas gdy drugi służy jako poligon doświadczalny do weryfikacji funkcjonalności wspomnianej niestandardowej rury za pomocą różnych scenariuszy testowych.

W skrypcie custom-pipe.pipe.ts można napotkać serię instrukcji programistycznych w następujący sposób:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Niniejsza instrukcja importu kodu pobiera dekorator Pipe i interfejs PipeTransform z modułu @angular/core. Wspomniany dekorator Pipe jest odpowiedzialny za określenie metadanych odnoszących się do rury, podczas gdy klasa rury jest zgodna ze wspomnianym interfejsem PipeTransform.

W implementacji klasy CustomPipePipe spełniamy wymagania interfejsu PipeTransform, zapewniając wykonanie metody transform. Metoda ta ma zasadniczy obowiązek wykonania transformacji na danych wejściowych.

Metoda “transform” zawiera w sumie dwie zmienne wejściowe, a mianowicie parametr “value”, który oznacza wartość transformacji rur, oraz parametr “args”, który służy jako przydział dla wszelkich dodatkowych specyfikacji, które można chcieć uwzględnić.

Po zrozumieniu podstawowej struktury pliku custom-pipe.pipe.ts można skutecznie zastąpić dostarczony fragment kodu w następujący sposób:

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

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

W tym fragmencie kodu funkcja transform przyjmuje parametr value typu string , który jest przekazywany jako argument do metody. Funkcja ta następnie wykorzystuje metodę split do podzielenia wejściowego ciągu znaków na tablicę pojedynczych znaków, ostatecznie zwracając wspomnianą tablicę.

Integracja Custom Pipe z aplikacją

Gratulacje! Udało Ci się stworzyć spersonalizowany pipe, który można płynnie zintegrować z szablonami Angular. Przed użyciem spersonalizowanego pipe’a w swoim projekcie, musisz go najpierw włączyć i zarejestrować w pliku app.module.ts . Aby to osiągnąć, wystarczy zastąpić obecną zawartość pliku app.module.ts poniższym fragmentem kodu:

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

Rzeczywiście, można teraz włączyć fajkę do pliku app.component.html szablonu, dołączając wyżej wymienione znaczniki, co ułatwia wdrożenie pożądanej funkcjonalności przy jednoczesnym przestrzeganiu ustalonych standardów tworzenia stron internetowych i najlepszych praktyk.

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

Na tej ilustracji CustomPipe jest wykorzystywany jako środek do konwersji poszczególnych znaków składających się na ciąg “apple” na reprezentację tablicową.

Testowanie niestandardowego potoku

Aby zaobserwować funkcjonalność dostosowanego potoku, należy uruchomić serwer programistyczny Angular, wykonując powyższe polecenie terminala.

 ng serve

Otwórz przeglądarkę i przejdź do http://localhost:4200 . Na stronie powinien zostać wyświetlony przekształcony ciąg znaków:

Przenieś swoje aplikacje Angular na wyższy poziom

Pipelines służą jako wybitny zasób w ramach frameworka Angular, umożliwiając manipulowanie i restrukturyzację informacji w całej aplikacji. Opracowując potoki dostosowane do indywidualnych potrzeb, można zwiększyć wszechstronność oprogramowania i nadać mu dodatkową dynamikę.

Aby zwiększyć swoją biegłość w Angular, konieczne jest zrozumienie jego mechanizmu routingu. Zarządzanie trasami odgrywa integralną rolę w kierowaniu nawigacją użytkownika w całej aplikacji, zwiększając w ten sposób zarówno użyteczność, jak i wydajność aplikacji jednostronicowych.