Последнее обновление 25.09.2023 — Василий Иванов
Каналы в Angular позволяют пользователям преобразовывать данные перед их отображением в представлении. Каналы похожи на фильтры в других языках программирования, но более гибки и могут быть настроены в соответствии с конкретными потребностями. Здесь вы узнаете, как использовать каналы в вашем приложении Angular.
Что такое трубы в Angular?
Angular Pipes — это преобразователи данных, которые делают ваше приложение более динамичным. Они принимают значение на входе и возвращают преобразованное значение на выходе. Преобразование данных может быть таким же простым, как форматирование даты или валюты, или таким сложным, как фильтрация или сортировка списка элементов.
Вы можете использовать каналы в своих компонентах Angular и своих шаблонах. Трубы просты в использовании, их можно объединять в цепочки для создания более сложных преобразований.
Angular предоставляет несколько встроенных каналов, включая DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe и AsyncPipe. Он также предоставляет функциональность для создания пользовательских каналов.
Каждый встроенный канал Angular выполняет уникальную функцию и может помочь вам преобразовать данные.
ДатаПайп
DatePipe форматирует и отображает переменные даты и времени в указанном формате с учетом вашего языкового стандарта. В отличие от других фреймворков, которым требуются пакеты JavaScript для форматирования даты и времени, Angular использует DatePipe. Чтобы использовать DatePipe в своем приложении, добавьте символ вертикальной черты (|), за которым следует дата и любые дополнительные параметры.
Например:
<p>Today's date is {{ currentDate | date }}</p>
В этом примере вы передаете переменную currentDate через DatePipe, который затем форматирует ее в соответствии с форматом даты по умолчанию. Вы определяете переменную currentDate в файле TypeScript вашего компонента.
Вот пример:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
currentDate: any = new Date();
}
Вы также можете передать в DatePipe дополнительные параметры для настройки вывода:
<p>Today's date is {{ currentDate | date:'shortDate' }}</p>
Приведенный выше блок кода передал параметр shortDate в DatePipe. Это указывает DatePipe отформатировать дату, используя короткий формат даты. Помимо параметра shortDate, вы можете настроить DatePipe, используя различные параметры, включая z, longDate и пользовательские форматы даты, такие как дд/ММ/ГГ.
UpperCasePipe и LowerCasePipe
UpperCasePipe и LowerCasePipe преобразуют ваши тексты. Вы преобразуете текст в верхний регистр с помощью UpperCasePipe и в нижний регистр с помощью LowerCasePipe.
Чтобы использовать UpperCasePipe и LowerCasePipe, добавьте символ вертикальной черты (|), а затем строчную букву, чтобы использовать LowerCasePipe, или верхний регистр, чтобы использовать UpperCasePipe.
Ниже приведен пример использования UpperCasePipe и LowerCasePipe:
<p>{{ message | uppercase}}</p>
<p>{{ message | lowercase}}</p>
ВалютаТруба
Используя CurrencyPipe, вы можете форматировать числа в валюте вашего приложения. CurrencyPipe форматирует числа в соответствии с вашим языковым стандартом. Чтобы отформатировать числа с помощью CurrencyPipe, используйте символ вертикальной черты, за которым следует валюта.
Например:
<p>{{ number | currency }}</p>
В этом примере CurrencyPipe преобразует числовую переменную в валюту. По умолчанию CurrencyPipe конвертирует переменные в доллары. Чтобы изменить это, вы можете настроить CurrencyPipe для конвертации в другие валюты, передав дополнительные параметры.
Вот пример:
<p>{{ number | currency: 'GBP' }}</p>
Здесь вы передаете параметр GBP в CurrencyPipe. Это гарантирует преобразование числовой переменной в валюту фунта стерлингов Великобритании.
Десятичный пайп и процентный пайп
DecimalPipe преобразует ваши числа в десятичные дроби, а PercentPipe преобразует ваши числа в проценты.
Чтобы использовать DecimalPipe, используйте символ вертикальной черты, за которым следует число и дополнительные параметры. Чтобы использовать PercentPipe, сделайте то же самое, но замените число процентами без дополнительных параметров.
Например:
<p>{{ number | number: '1.2-3' }}</p>
<p>{{ number | percent }}</p>
Дополнительные параметры, передаваемые в DecimalPipe, управляют количеством отображаемых целых и дробных цифр. Параметр 1 указывает, что должна быть хотя бы одна целая цифра. Для сравнения, параметр 2.3 указывает, что должно быть от двух до трех дробных цифр.
JsonPipe
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"],
})
export class AppComponent {
user: data = {
firstname: "John",
lastname: "Doe",
};
profiles: data[] = [
{
firstname: "John",
lastname: "Doe",
},
{
firstname: "Peter",
lastname: "Parker",
},
];
}
interface data {
firstname: string;
lastname: string;
}
Приведенный выше блок кода определяет объект пользователя и массив профилей. Теперь вы можете использовать JsonPipe для преобразования объекта и массива в JSON.
<p>{{ user | json}}</p>
<p>{{ profiles | json}}</p>
Здесь JsonPipe преобразует объект пользователя и массив профилей в строку JSON, которую вы можете быстро просмотреть в своих шаблонах во время разработки или отладки.
СрезТруба
SlicePipe очень похож на метод среза() в JavaScript. SlicePipe форматирует массивы или строки, извлекая их элементы для создания новых массивов или строк.
Чтобы использовать SlicePipe, вы используете символ трубы, за которым следует срез и два параметра: начальный и конечный индексы. Начальный индекс — это позиция в массиве или строке, где канал начнет извлекать элементы, а конечный индекс — это то место, где канал прекратит извлечение элементов.
Вот пример использования SlicePipe:
<p>{{ string | slice: 0:2}}</p>
<p>{{ array | slice: 0:1}}</p>
В этом примере SlicePipe извлекает первые два элемента из строковой переменной: элемент с индексом 0 и элемент с индексом 1. Далее он извлекает первый элемент из переменной массива. SlicePipe полезен, когда вы хотите отобразить только часть данных в шаблоне.
Асинкпайп
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 и т. д. Вы также узнали, как использовать их в своем приложении для создания более динамичного контента. Используя каналы, разработчики могут создавать более гибкие и динамичные веб-приложения с меньшим количеством кода.
Часто задаваемые вопросы
Вопрос: Как мне создать свои собственные трубы?
Помимо этих встроенных каналов вы можете создавать собственные каналы для форматирования данных в соответствии с вашими потребностями.
Вопрос: В чем разница между каналом и директивой?
Встроенные директивы Angular получают элементы DOM и манипулируют ими, а каналы работают с данными.
Вопрос: Angular все еще совершенствует трубы?
Каналы являются стабильной частью фреймворка, но поддержка продолжает улучшаться. Например, в версии v16 теперь можно автоматически создавать файлы каналов с помощью Angular CLI.
