Что нужно знать о пайпах в Angular
Вот что вам нужно знать об использовании пайпов в вашем приложении Angular.
Что такое пайпы в Angular?
Pipes в Angular — это инструменты преобразования данных, которые делают приложения более динамичными. Они принимают значение в качестве входных данных и возвращают преобразованное значение в качестве выходных данных. Преобразования данных могут быть такими же простыми, как форматирование дат или валют, или такими же сложными, как фильтрация или сортировка списка элементов.
Вы можете использовать каналы в компонентах и шаблонах Angular. Использовать трубы легко, и вы можете связать их в цепочку для создания более сложных преобразований.
Angular предоставляет ряд каналов, включая DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe и AsyncPipe. Он также обеспечивает создание пользовательских каналов.
Каждый встроенный канал Angular реализует уникальную функцию и может помочь вам преобразовать данные.
DataPipe
DataPipe форматирует и отображает переменные даты и месяца в формате, указанном в вашей локали. В отличие от других фреймворков, которым требуется пакет JavaScript для форматирования дат и месяцев, Angular использует DataPipe. Чтобы использовать DatePipe в своем приложении, добавьте символ вертикальной черты (|), за которым следует дата и любые другие дополнительные параметры.
Например:
Сегодняшняя дата {{ currentDate | дата }}
В этом примере вы передаете переменную currentDate в DataPipe, а затем форматируете ее в формат даты по умолчанию. Вы определяете переменную currentDate в файле TypeScript вашего компонента.
Например:
импортировать {Компонент} из ‘@angular/core’; @Component({селектор: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: (‘./app.component.scss’) }) export class AppComponent { currentDate: any = new Date( ); }
Вы также можете передать дополнительные параметры в DataPipe, чтобы настроить результаты:
Сегодняшняя дата {{ currentDate | дата: ‘короткая дата’ }}
Приведенный выше блок кода передал параметр shortDate в DatePipe . Это говорит DatePipe отформатировать дату в коротком стиле. Помимо параметра shortDate, вы можете настроить DatePipe, используя различные параметры, включая z, longDate и пользовательские форматы даты, такие как дд/мм/гг.
UpperCasePipe и LowerCasePipe
UpperCasePipe и LowerCasePipe преобразуют ваш текст. Вы можете преобразовать текст в верхний регистр с помощью UpperCasePipe и в нижний регистр с помощью LowerCasePipe .
Чтобы использовать UpperCasePipe и LowerCasePipe , добавьте символ вертикальной черты (|), за которым следует нижний регистр для использования LowerCasePipe или верхний регистр для использования UperCasePipe .
Вот пример использования UpperCasePipe и LowerCasePipe:
{{ сообщение | верхний регистр}}
{{ сообщение | нижний регистр}}
ВалютаПайп
С помощью CurrencyPipe вы можете преобразовать числа в валюту приложения. CurrencyPipe форматирует числа в соответствии с вашим языком. Для форматирования чисел с помощью CurrencyPipe используйте символ вертикальной черты, за которым следует валюта.
Например:
{{ номер | валюта }}
В этом примере CurrencyPipe преобразует переменную в валюту. По умолчанию CurrencyPipe конвертирует переменные в доллары. Чтобы изменить это, вы можете настроить CurrencyPipe для конвертации в другую валюту, передав дополнительные параметры.
Например:
{{ номер | валюта: ‘GBP’ }}
Здесь вы передаете параметр GBP в CurrencyPipe. Это обеспечивает преобразование числовой переменной в валюту британского фунта стерлингов.
DecimalPipe и PercentPipe
DecimalPipe преобразует числа в десятичные дроби, а PercentPipe преобразует числа в проценты.
Чтобы использовать DecimalPipe , используйте символ вертикальной черты, за которым следует число и дополнительные параметры. Чтобы использовать PercentPipe , сделайте то же самое, но замените число процентами и без дополнительных параметров.
Например:
{{ номер | номер: ‘1.2-3’ }}
{{ номер | процент }}
Дополнительный параметр передается в DecimalPipe, который управляет отображаемыми целыми числами и дробями. Параметр 1 указывает, что должна быть хотя бы одна целая цифра. Для сравнения, в параметре 2.3 указано, что дробных цифр должно быть не менее 2-х и не более 3-х.
JsonPipe
JsonPipe — это встроенный канал, который преобразует данные в строковый формат JSON. Он в основном используется для целей отладки. Вы можете использовать JsonPipe как для объектов, так и для массивов.
Синтаксис:
{{ выражение | json }}
Здесь выражение — это данные, которые вы хотите преобразовать в формат JSON. Оператор канала ( | ) применяет JsonPipe к этому выражению.
Например, определите объект и массив в вашем компоненте:
импортировать {Компонент} из “@angular/core”; @Component({ селектор: “app-root”, templateUrl: “./app.component.html”, styleUrls: (“./app.component.scss”), }) export class AppComponent { user: data = { firstname : “Джон”, фамилия: “Доу”, }; profiles: data() = ( { имя: “Джон”, фамилия: “Доу”, }, { имя: “Питер”, фамилия: “Паркер”, }, ); } данные интерфейса { имя: строка; фамилия: строка; }
Приведенный выше блок кода определяет объект пользователя и массив профилей. Теперь вы можете использовать JsonPipe для преобразования объектов и массивов в JSON.
{{ пользователь | json}}
{{ профили | json}}
Здесь JsonPipe преобразует пользовательский объект и массив профилей в строку JSON, которую можно быстро просмотреть в шаблоне во время разработки или отладки.
SlicePipe
SlicePipe похож на метод slice() в JavaScript. SlicePipe форматирует массивы или строки, извлекая элементы для создания новых массивов или строк.
Чтобы использовать SlicePipe, вы используете значок трубы, затем срез и два параметра, начальный и конечный индексы. Начальный индекс — это позиция в массиве или строке, где канал начинает доступ к элементам, а конечный индекс — это место, где канал будет использовать для доступа к элементам.
Пример использования SlicePipe:
{{ строка | срез: 0:2}}
{{массив | срез: 0:1}}
В этом примере SlicePipe извлечет первые два элемента из строковой переменной, элемент с индексом 0 и элемент с индексом 1. Кроме того, он извлечет первый элемент из переменной массива. SlicePipe полезен, когда вы хотите показать только часть данных в шаблоне.
Асинкпайп
AsyncPipe — это интегрированный канал Angular, который автоматически подписывается и отменяет подписку на Observale или Promise. Он возвращает последнее значение, сгенерированное Observable или Promise.
Синтаксис использования AsyncPipe следующий:
{{ выражение | асинхронный }}
Здесь выражение — это Observable или Promise, на которое вы хотите подписаться. Например:
пусть числа = из (1, 2, 3, 4, 5);
Вы можете использовать AsyncPipe, чтобы подписаться на Observable и показать последнее воспроизведенное значение следующим образом:
{{ числа | асинхронный }}
Этот блок кода выведет последнее число из Observable. AsyncPipe очень полезен при работе с асинхронными операциями в шаблонах. Он автоматически подписывается на Observable или Promise при инициализации компонента и отписывается при его уничтожении.
Резьбовые трубы в Angular
Вы можете связать конвейеры вместе, чтобы реализовать несколько преобразований в выражении. Цепочка каналов так же проста, как использование нескольких операторов каналов (|) в выражении. Выход каждой трубы становится входом для следующей трубы.
Основной синтаксис:
{{ выражение | труба1 | труба2 | . }}
Например, вы можете преобразовать объект даты в строку с помощью DatePipe, а затем преобразовать эту строку в верхний регистр с помощью UpperCasePipe.
Сегодняшняя дата {{ currentDate | дата: ‘короткая дата’ | верхний регистр }}
Pipes — это мощная функция в Angular, которая позволяет вам изменять данные до того, как они появятся в окне просмотра. Надеюсь, из этой статьи вы узнали, как эффективно использовать Pipe в Angular.
