Angular- wykorzystanie wbudowanych i deklarowanie własnych pipe-ów

Stronę tą wyświetlono już: 11 razy

Wstęp

Pipe to element, który umożliwia w kodzie HTML filtrować dane wejściowe tak, aby wyświetlały się w odpowiednim formacie. Są więc wbudowane pipe-y, które zamieniają tekst na pisany dużymi literami. Oczywiście istnieje również możliwość tworzenia własnych pipe-ów. Ułatwienie jakie niesie za sobą korzystanie z pipe-ów nie jest jedynym powodem, dla którego warto z nich korzystać. Okazuje się bowiem, że Angular optymalizuje zadania związane z odświeżaniem widoku, co w znacznym stopniu ułatwia renderowanie widoku.

Przykłady wbudowanych pipe-ów

Angular ma swoje własne już zadeklarowane pipe-y, do których należą między innymi:

  • uppercase - zamienia tekst pisany małymi literami na pisany dużymi:

    Listing 1
    1. <p>{{ title | uppercase }}</p>
  • lowercase - zamienia tekst pisany dużymi literami na pisany małymi:

    Listing 2
    1. <p>{{ title | lowercase }}</p>
  • number - formatuje zmienne numeryczne, oto seria przykładów zaczerpniętych prosto z dokumentacji:

    Listing 3
    1. <!--output '2.718'-->
    2. <p>e (no formatting): {{e | number}}</p>
    3. <!--output '002.71828'-->
    4. <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
    5. <!--output '0,002.71828'-->
    6. <p>e (4.5-5): {{e | number:'4.5-5'}}</p>
    7. <!--output '0 002,71828'-->
    8. <p>e (french): {{e | number:'4.5-5':'fr'}}</p>
    9. <!--output '3.14'-->
    10. <p>pi (no formatting): {{pi | number}}</p>
    11. <!--output '003.14'-->
    12. <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p>
    13. <!--output '003.14000'-->
    14. <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
    15. <!--output '-3' / unlike '-2' by Math.round()-->
    16. <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p>
  • date - formatowanie zmiennych typu Date, przechowujących datę. Oto seria przykładów zaczerpniętych prosto z dokumentacji:

    Listing 4
    1. {{ dateObj | date }} // output is 'Jun 15, 2015'
    2. {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
    3. {{ dateObj | date:'shortTime' }} // output is '9:43 PM'
    4. {{ dateObj | date:'mm:ss' }} // output is '43:11'

Tworzenie własnych pipe-ów

Istnieje możliwość napisania własnego pipe-a, który może przyjmować dowolną liczbę argumentów. Oto przykład, który mówi więcej aniżeli tysiąc słów:

Listing 5
  1. import { Pipe, PipeTransform } from '@angular/core';
  2. @Pipe({
  3. name: 'suffixAndPreffix'
  4. })
  5. export class SuffixAndPreffixPipe implements PipeTransform {
  6. transform(value: any, suffix: string, prefix: string): any {
  7. return `${suffix} ${value} ${prefix}`;
  8. }
  9. }

Przykład użycia:

Listing 6
  1. <!-- Wynik: Cena 100 zł -->
  2. <p> {{ price | suffixAndPreffix : 'Cena: ': ' zł' }} </p>

Pipe-y można nakładać na siebie:

Listing 7
  1. <!-- Wynik: Cena 100.00 zł -->
  2. <p>{{ price | number: '1.2-2' | suffixAndPreffix: 'Cena: ': ' zł' }}</p>
Strony powiązane
strony powiązane
  1. angular.io/guide/pipes - dokumentacja dotycząca używania i tworzenia Pipe-ów

Komentarze