Kompleksowy przewodnik po rurach w Angular

Potoki w Angular pozwalają użytkownikom przekształcać dane, zanim zostaną one wyświetlone w widoku. Potoki są podobne do filtrów w innych językach programowania, ale są bardziej elastyczne i można je dostosować do konkretnych potrzeb. Tutaj dowiesz się, jak używać potoków w aplikacji Angular.

Czym są rury w Angular?

Potoki kątowe to transformatory danych, które sprawiają, że Twoja aplikacja jest bardziej dynamiczna. Przyjmują wartość jako dane wejściowe i zwracają przekształconą wartość jako dane wyjściowe. Transformacja danych może być tak prosta, jak sformatowanie daty lub waluty, lub tak złożona, jak filtrowanie lub sortowanie listy elementów.

Możesz użyć rur w komponentach Angular i swoje szablony. Rury są łatwe w użyciu i można je łączyć w łańcuchy, aby tworzyć bardziej złożone przekształcenia.

Angular zapewnia kilka wbudowanych potoków, w tym DataPipe, Wielkie literyPipe, DolnyCasePipe, Rura walutowa, Potok dziesiętny

, Rura procentowa, JsonPipe, SlicePipe, I Potok asynchroniczny. Zapewnia również funkcjonalność tworzenia niestandardowych rur.

Każdy wbudowany potok Angular pełni unikalną funkcję i może pomóc w transformacji danych.

DataPipe

The DataPipe formaty i wyświetlacze twoje zmienne daty i godziny w określonym formacie, biorąc pod uwagę ustawienia regionalne. W przeciwieństwie do innych ram, które wymagają Pakiety JavaScript do formatowania daty i godziny, Angular używa DataPipe. Używać DataPipe w swojej aplikacji dodaj symbol potoku (|), a następnie data oraz wszelkie dodatkowe parametry.

Na przykład:

<p>Today's date is {{ currentDate | date }}p>

W tym przykładzie przekazujesz bieżąca data zmienna przez DataPipe, który następnie formatuje go zgodnie z domyślnym formatem daty. Ty definiujesz bieżąca data zmiennej w pliku TypeScript komponentu.

Oto przykład:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Możesz także przekazać dodatkowe parametry do DataPipe aby dostosować dane wyjściowe:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Powyższy blok kodu przeszedł krótka randka parametr do DataPipe. To mówi DataPipe aby sformatować datę przy użyciu formatu daty krótkiej. obok krótka randka parametr, możesz skonfigurować DataPipe przy użyciu różnych parametrów, m.in z, długa datai niestandardowe formaty daty, takie jak dd/MM/RR.

UpperCasePipe i LowerCasePipe

The Wielkie literyPipe I DolnyCasePipe przekształć swoje teksty. Przekształcasz swoje teksty na wielkie litery za pomocą Wielkie literyPipe i małymi literami za pomocą DolnyCasePipe.

Aby użyć Wielkie literyPipe I DolnyCasePipe, dodaj symbol potoku (|), a następnie małe litery korzystać z DolnyCasePipe Lub duże litery korzystać z Wielkie literyPipe.

Poniżej znajduje się przykład użycia Wielkie literyPipe I DolnyCasePipe:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

Rura walutowa

Używając Rura walutowa, możesz sformatować liczby do waluty w swojej aplikacji. The Rura walutowa formatuje liczby zgodnie z ustawieniami regionalnymi. Aby sformatować swoje liczby za pomocą Rura walutowa, użyj symbolu rury, po którym następuje waluta.

Na przykład:

<p>{{ number | currency }}p>

W tym przykładzie Rura walutowa konwertuje zmienną liczbową na walutę. Domyślnie Rura walutowa konwertuje zmienne na dolary. Aby to zmienić, możesz skonfigurować plik Rura walutowa przeliczać na inne waluty, przekazując dodatkowe parametry.

Oto przykład:

<p>{{ number | currency: 'GBP' }}p>

Tutaj przechodzisz GBP parametr do Rura walutowa. Zapewnia to, że numer zmienna przeliczana na walutę funta brytyjskiego.

Potok dziesiętny i Potok procentowy

The Potok dziesiętny przekształca twoje liczby na dziesiętne, podczas gdy Rura procentowa konwertuje twoje liczby na procenty.

Aby użyć Potok dziesiętny, użyj symbolu rury, po którym następuje numer i dodatkowe parametry. Aby użyć Rura procentowa, zrób to samo, ale wymień numer z procent bez dodatkowych parametrów.

Na przykład:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Dodatkowe parametry przekazywane do Potok dziesiętny kontrolować liczbę wyświetlanych cyfr całkowitych i ułamkowych. The 1 parametr określa, że ​​powinna być co najmniej jedna cyfra całkowita. Dla porównania, 2.3 parametr określa, że ​​powinny być co najmniej dwie i maksymalnie trzy cyfry ułamkowe.

JsonPipe

The JsonPipe to wbudowany potok, który konwertuje dane na format ciągu JSON. Jest używany głównie do celów debugowania. Możesz użyć JsonPipe zarówno na obiektach, jak i tablicach.

Składnia używania JsonPipe następująco:

{{ expression | json }}

Tutaj, wyrażenie to dane, które chcesz przekonwertować na format JSON. Operator potoku (|) stosuje JsonPipe do wyrażenia.

Na przykład zdefiniuj obiekt i tablicę w swoim komponencie:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Powyższy blok kodu definiuje a użytkownik obiekt i A profile szyk. Teraz możesz użyć tzw JsonPipe aby przekonwertować obiekt i tablicę na JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Tutaj JsonPipe dokona konwersji użytkownik obiekt i profile array w łańcuch JSON, który możesz szybko sprawdzić w swoich szablonach podczas programowania lub debugowania.

SlicePipe

The SlicePipe jest bardzo podobny do JavaScriptu plasterek() metoda. The SlicePipe formatuje tablice lub łańcuchy, wyodrębniając ich elementy w celu utworzenia nowych tablic lub łańcuchów.

Aby użyć SlicePipe, używasz symbolu rury, po którym następuje plasterek oraz dwa parametry, indeksy początkowe i końcowe. Indeks początkowy to pozycja w tablicy lub łańcuchu, w której potok rozpocznie wyodrębnianie elementów, a indeks końcowy to miejsce, w którym potok przestanie wyodrębniać elementy.

Oto przykład, jak użyć SlicePipe:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

W tym przykładzie SlicePipe wyodrębni dwa pierwsze elementy z pliku strunowy zmienna, element o indeksie 0 i element o indeksie 1. Ponadto wyodrębni pierwszy element z pliku szyk zmienny. The SlicePipe jest przydatne, gdy chcesz wyświetlić tylko część danych w szablonie.

Potok asynchroniczny

Potok asynchroniczny to wbudowany potok Angular, który automatycznie subskrybuje i anuluje subskrypcję Observable lub Promise. Zwraca ostatnią wartość wyemitowaną przez Observable lub Promise.

Składnia do użycia Potok asynchroniczny następująco:

{{ expression | async }}

Tutaj wyrażeniem jest Obserwowalna lub Obietnica, którą chcesz subskrybować.

Na przykład:

let numbers = of(1, 2, 3, 4, 5);

Możesz użyć Potok asynchroniczny aby zasubskrybować ten Observable i wyświetlić ostatnią wyemitowaną wartość w ten sposób:

<p>{{ numbers | async }}p>

Ten blok kodu wyświetli ostatnią liczbę wyemitowaną przez Observable. Potok asynchroniczny jest bardzo przydatne podczas obsługi operacji asynchronicznych w szablonach. Automatycznie subskrybuje Observable lub Promise, gdy komponent jest inicjowany i anuluje subskrypcję, gdy zostanie zniszczony.

Łączenie rur w Angular

Możesz połączyć potoki w łańcuch, aby wykonać wiele przekształceń w jednym wyrażeniu. Łańcuch potoków jest tak prosty, jak użycie wielu operatorów potoków (|) w jednym wyrażeniu. Wyjście każdego potoku staje się wejściem dla następnego.

Oto podstawowa składnia:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Na przykład możesz przekształcić obiekt daty w łańcuch, używając metody DataPipe a następnie przekonwertuj ten ciąg na wielkie litery, używając Wielkie literyPipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Twórz dynamiczne aplikacje za pomocą potoków

Potoki to potężna funkcja w Angular, która umożliwia przekształcanie danych przed ich wyświetleniem w widoku. Tutaj dowiedziałeś się o różnych wbudowanych rurach oferowanych przez Angular, takich jak DatePipe, CurrencyPipe, UpperCasePipe itp. Nauczyłeś się również, jak używać ich w swojej aplikacji do tworzenia bardziej dynamicznych treści. Korzystając z potoków, programiści mogą tworzyć bardziej elastyczne i dynamiczne aplikacje internetowe przy użyciu mniejszej ilości kodu.