Улеснете преобразуването на данни в Angular приложения с помощта на Angular pipes.
Тръбите в Angular позволяват на потребителите да трансформират данни, преди да бъдат показани в изгледа. Тръбите са подобни на филтрите в други езици за програмиране, но са по-гъвкави и могат да бъдат персонализирани, за да отговорят на конкретни нужди. Тук ще проучите как да използвате тръби във вашето Angular приложение.
Какво представляват тръбите в Angular?
Ъгловите тръби са трансформатори на данни, които правят приложението ви по-динамично. Те приемат стойност като вход и връщат трансформирана стойност като изход. Трансформацията на данни може да бъде толкова проста, колкото форматиране на дата или валута, или толкова сложна, колкото филтриране или сортиране на списък от елементи.
Можете да използвате тръбите във вашите Angular компоненти и вашите шаблони. Тръбите са лесни за използване и можете да ги вържете, за да създадете по-сложни трансформации.
Angular предоставя няколко вградени тръби, включително
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, и AsyncPipe. Той също така предоставя функционалност за създаване на персонализирани тръби.Всяка вградена тръба на Angular изпълнява уникална функция и може да ви помогне да трансформирате данни.
DatePipe
The DatePipe формати и дисплеи вашите променливи за дата и час в определен формат, като се има предвид вашият локал. За разлика от други рамки, които изискват JavaScript пакети за форматиране на дата и час, Angular използва DatePipe. Да използвам DatePipe във вашето приложение добавете символа за тръба (|), последван от дата и всички допълнителни параметри.
Например:
<p>Today's date is {{ currentDate | date }}p>
В този пример вие преминавате текуща дата променлива чрез DatePipe, който след това го форматира според формата на датата по подразбиране. Вие определяте текуща дата променлива в TypeScript файла на вашия компонент.
Ето един пример:
import { Component } from'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
currentDate: any = newDate();
}
Можете също да подадете допълнителни параметри към DatePipe за да персонализирате изхода:
<p>Today's date is {{ currentDate | date:'shortDate' }}p>
Кодовият блок по-горе премина shortDate параметър към DatePipe. Това разказва на DatePipe за да форматирате датата, като използвате краткия формат за дата. Наред с shortDate параметър, можете да конфигурирате DatePipe с помощта на различни параметри, включително z, longDateи персонализирани формати за дата като дд/мм/гг.
UpperCasePipe и LowerCasePipe
The UpperCasePipe и LowerCasePipe трансформирайте вашите текстове. Преобразувате текстовете си в главни букви, като използвате UpperCasePipe и малки букви с помощта на LowerCasePipe.
За да използвате UpperCasePipe и LowerCasePipe, добавете символа за тръба (|), последван от малка буква да използвате LowerCasePipe или Главна буква да използвате UpperCasePipe.
По-долу е даден пример как да използвате UpperCasePipe и LowerCasePipe:
<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>
CurrencyPipe
Използвайки CurrencyPipe, можете да форматирате числа във валута във вашето приложение. The CurrencyPipe форматира числата според вашия локал. За да форматирате вашите числа с помощта на CurrencyPipe, използвайте символа за тръба, последван от валута.
Например:
<p>{{ number | currency }}p>
В този пример, CurrencyPipe преобразува числовата променлива във валута. По подразбиране, CurrencyPipe преобразува променливите в долари. За да промените това, можете да конфигурирате CurrencyPipe за конвертиране в други валути чрез предаване на допълнителни параметри.
Ето един пример:
<p>{{ number | currency: 'GBP' }}p>
Ето, преминавате Британски паунд параметър към CurrencyPipe. Това гарантира, че номер променлива преобразува във валутата на британския паунд.
DecimalPipe и PercentPipe
The DecimalPipe преобразува вашите числа в десетични знаци, докато PercentPipe преобразува вашите числа в проценти.
За да използвате DecimalPipe, използвайте символа за тръба, последван от номер и допълнителни параметри. За да използвате PercentPipe, направете същото, но заменете номер с процента без допълнителни параметри.
Например:
<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>
Допълнителните параметри, предадени на DecimalPipe контролира броя на показваните цели и дробни цифри. The 1 параметърът указва, че трябва да има поне една цяла цифра. За сравнение, 2.3 параметърът указва, че трябва да има поне две и до три дробни цифри.
JsonPipe
The JsonPipe е вграден канал, който преобразува данните във формат на JSON низ. Използва се главно за отстраняване на грешки. Можете да използвате JsonPipe върху обекти и масиви.
Синтаксисът за използване на JsonPipe е както следва:
{{ expression | json }}
Тук, изразяване са данните, които искате да конвертирате във формат JSON. Тръбният оператор (|) прилага JsonPipe към израза.
Например, дефинирайте обект и масив във вашия компонент:
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;
}
Кодовият блок по-горе дефинира a потребител обект и а профили масив. Сега можете да използвате JsonPipe за преобразуване на обекта и масива в JSON.
<p>{{ user | json}}p>
<p>{{ profiles | json}}p>
Ето, JsonPipe ще преобразува потребител обект и профили масив в JSON низ, който можете бързо да проверите във вашите шаблони по време на разработка или отстраняване на грешки.
SlicePipe
The SlicePipe е много подобен на JavaScript парче () метод. The SlicePipe форматира масиви или низове, като извлича техните елементи, за да създаде нови масиви или низове.
За да използвате SlicePipe, използвате символа за тръба, последван от парче и два параметъра, начален и краен индекс. Началният индекс е позицията в масива или низа, където тръбата ще започне да извлича елементи, а крайният индекс е мястото, където тръбата ще спре да извлича елементи.
Ето пример за това как да използвате SlicePipe:
<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>
В този пример, SlicePipe ще извлече първите два елемента от низ променлива, елементът с индекс 0 и елементът с индекс 1. Освен това, той ще извлече първия елемент от масив променлива. The SlicePipe е полезно, когато искате да покажете само част от данните в шаблона.
AsyncPipe
AsyncPipe е вграден канал Angular, който автоматично се абонира и отписва за Observable или Promise. Той връща последната стойност, излъчена от Observable или Promise.
Синтаксисът за използване AsyncPipe е както следва:
{{ expression | async }}
Тук изразът е Observable или Promise, за който искате да се абонирате.
Например:
let numbers = of(1, 2, 3, 4, 5);
Можеш да използваш AsyncPipe за да се абонирате за този Observable и да показвате най-новата излъчена стойност по следния начин:
<p>{{ numbers | async }}p>
Този кодов блок ще изведе последното число, излъчено от Observable. AsyncPipe е много полезно при работа с асинхронни операции във вашите шаблони. Той автоматично се абонира за Observable или Promise, когато компонентът се инициализира и се отписва, когато бъде унищожен.
Верижни тръби в Angular
Можете да лансирате канали заедно, за да извършите множество трансформации в един израз. Верижното свързване на канали е толкова просто, колкото използването на множество оператори на канали (|) в един израз. Изходът на всяка тръба става вход за следващата.
Ето основния синтаксис:
<p>{{ expression | pipe1 | pipe2 |... }}p>
Например, можете да трансформирате обект за дата в низ, като използвате DatePipe и след това преобразувайте този низ в главни букви, като използвате UpperCasePipe.
<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>
Създавайте динамични приложения с помощта на канали
Тръбите са мощна функция в Angular, която ви позволява да трансформирате данни, преди да се покажат в изгледа. Тук научихте за различните вградени тръби Angular, като DatePipe, CurrencyPipe, UpperCasePipe и др. Освен това научихте как да ги използвате във вашето приложение, за да създадете по-динамично съдържание. Използвайки канали, разработчиците могат да създават по-гъвкави и динамични уеб приложения с по-малко код.