Упростите преобразование данных в приложениях Angular с помощью каналов Angular.

Pipes в Angular позволяют пользователям преобразовывать данные перед их отображением в представлении. Каналы похожи на фильтры в других языках программирования, но они более гибкие и могут быть настроены в соответствии с конкретными потребностями. Здесь вы узнаете, как использовать каналы в своем приложении Angular.

Что такое пайпы в Angular?

Angular pipe — это преобразователи данных, которые делают ваше приложение более динамичным. Они принимают значение в качестве входных данных и возвращают преобразованное значение в качестве выходных данных. Преобразование данных может быть таким же простым, как форматирование даты или валюты, или сложным, как фильтрация или сортировка списка элементов.

Вы можете использовать трубы в ваших компонентах Angular и ваши шаблоны. Трубы просты в использовании, и вы можете соединять их в цепочки для создания более сложных преобразований.

Angular предоставляет несколько встроенных каналов, включая

instagram viewer
DatePipe, UpperCasePipe, нижний регистр, ВалютаПайп, Десятичная труба, Процентпайп, JsonPipe, SlicePipe, и Асинкпайп. Он также предоставляет функциональные возможности для создания пользовательских каналов.

Каждый встроенный канал Angular выполняет уникальную функцию и может помочь вам преобразовать данные.

DatePipe

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>

Блок кода выше прошел проверку короткая дата параметр к DatePipe. Это говорит DatePipe для форматирования даты с использованием короткого формата даты. Наряду с короткая дата параметр, вы можете настроить DatePipe по различным параметрам, в том числе г, длинная дата, а также настраиваемые форматы даты, такие как дд/мм/гг.

UpperCasePipe и LowerCasePipe

UpperCasePipe и нижний регистр преобразовать ваши тексты. Вы преобразуете свои тексты в верхний регистр, используя UpperCasePipe и строчными буквами с помощью нижний регистр.

Чтобы использовать UpperCasePipe и нижний регистр, добавьте символ трубы (|), а затем нижний регистр использовать нижний регистр или верхний регистр использовать UpperCasePipe.

Ниже приведен пример использования UpperCasePipe и нижний регистр:

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

ВалютаПайп

Используя ВалютаПайп, вы можете преобразовать числа в валюту в своем приложении. ВалютаПайп форматирует числа в соответствии с вашей локалью. Чтобы отформатировать числа с помощью ВалютаПайп, используйте символ трубы, за которым следует валюта.

Например:

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

В этом примере ВалютаПайп преобразует числовую переменную в валюту. По умолчанию ВалютаПайп конвертирует переменные в доллары. Чтобы изменить это, вы можете настроить ВалютаПайп конвертировать в другие валюты, передавая дополнительные параметры.

Вот пример:

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

Здесь вы проходите Фунт стерлингов параметр к ВалютаПайп. Это гарантирует, что число переменная конвертируется в валюту фунта стерлингов Великобритании.

DecimalPipe и PercentPipe

Десятичная труба преобразует ваши числа в десятичные, а Процентпайп преобразует ваши числа в проценты.

Чтобы использовать Десятичная труба, используйте символ трубы, за которым следует число и дополнительные параметры. Чтобы использовать Процентпайп, сделайте то же самое, но замените число с процент без дополнительных параметров.

Например:

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

Дополнительные параметры, переданные в Десятичная труба управлять количеством отображаемых целых и дробных цифр. 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"],
})


exportclass 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

SlicePipe очень похоже на JavaScript кусочек() метод. SlicePipe форматирует массивы или строки, извлекая их элементы для создания новых массивов или строк.

Чтобы использовать SlicePipe, вы используете символ трубы, за которым следует кусочек и два параметра, начальный и конечный индексы. Начальный индекс — это позиция в массиве или строке, где конвейер начнет извлекать элементы, а конечный индекс — это место, где конвейер остановит извлечение элементов.

Вот пример того, как использовать SlicePipe:

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

В этом примере SlicePipe извлечет первые два элемента из нить переменная, элемент с индексом 0 и элемент с индексом 1. Далее он извлечет первый элемент из множество переменная. SlicePipe полезно, когда вы хотите отобразить только часть данных в шаблоне.

Асинкпайп

Асинкпайп — это встроенный канал Angular, который автоматически подписывается и отменяет подписку на Observable или Promise. Он возвращает последнее значение, сгенерированное Observable или Promise.

Синтаксис использования Асинкпайп как следует:

{{ expression | async }}

Здесь выражение — это Observable или Promise, на которое вы хотите подписаться.

Например:

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

Вы можете использовать Асинкпайп чтобы подписаться на этот Observable и отобразить последнее выданное значение следующим образом:

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

Этот блок кода выведет последнее число, выданное Observable. Асинкпайп очень полезно при обработке асинхронных операций в ваших шаблонах. Он автоматически подписывается на Observable или Promise при инициализации компонента и отменяет подписку при его уничтожении.

Цепочка труб в Angular

Вы можете объединять конвейеры в цепочку для выполнения нескольких преобразований в одном выражении. Объединить конвейеры в цепочки так же просто, как использовать несколько операторов конвейеров (|) в одном выражении. Выход каждой трубы становится входом для следующей.

Вот основной синтаксис:

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

Например, вы можете преобразовать объект даты в строку, используя DatePipe а затем преобразовать эту строку в верхний регистр, используя UpperCasePipe.

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

Создание динамических приложений с использованием каналов

Pipes — это мощная функция Angular, которая позволяет преобразовывать данные перед их отображением в представлении. Здесь вы узнали о различных встроенных каналах Angular, таких как DatePipe, CurrencyPipe, UpperCasePipe и т. д. Вы также узнали, как использовать их в своем приложении для создания более динамичного контента. Используя конвейеры, разработчики могут создавать более гибкие и динамичные веб-приложения с меньшим количеством кода.