Пользовательский канал в Angular — это способ преобразования и форматирования данных перед их отображением в пользовательском интерфейсе. Он позволяет создавать многоразовые преобразования данных, которые можно применять в шаблонах с помощью оператора канала (|
). Пользовательские каналы особенно полезны, когда вам нужно выполнить определенные манипуляции с данными или фильтрацию, которые недоступны по умолчанию.
Вот несколько ключевых моментов о пользовательских каналах в Angular:
- Создание пользовательских каналов:
- Вы можете создать собственный канал, реализовав интерфейс
PipeTransform
и предоставив методtransform
в своем классе. - Класс канала обычно украшается декоратором
@Pipe
, который указывает имя канала, которое будет использоваться в шаблонах.
2. Использование пользовательских каналов:
- Пользовательские каналы используются в шаблонах с оператором канала (
|
). Например:{{ data | customPipe }}
. - Вы также можете передавать аргументы пользовательским каналам, чтобы настроить их поведение:
{{ data | customPipe: arg1: arg2 }}
.
3. Трубные аргументы и чистые трубы:
- По умолчанию Angular рассматривает каналы как «чистые», что означает, что они запускаются только при изменении входного значения. Это сделано для оптимизации производительности.
- Если канал принимает аргументы и аргументы изменяются, вызывается канал.
- Вы можете установить канал как «нечистый», включив
pure: false
в декоратор@Pipe
. Это заставляет конвейер работать в каждом цикле обнаружения изменений.
4. Логика преобразования трубы:
- Метод
transform
в пользовательском канале — это место, где вы определяете логику для преобразования входных данных. - Входные данные — это значение, переданное оператору канала (
|
) в шаблоне.
5. Цепочка труб:
- Вы можете объединить несколько каналов в шаблон, чтобы последовательно применять различные преобразования:
{{ data | pipe1 | pipe2 }}
.
6. Общие варианты использования пользовательских каналов:
- Форматирование дат и чисел.
- Фильтрация и сортировка списков данных.
- Преобразование текста (верхний, нижний, заглавный).
- Пользовательские манипуляции с данными.
7. Опции декоратора труб:
- Декоратор
@Pipe
может иметь дополнительные параметры конфигурации, такие какpure
для установки канала как нечистого. - Пример:
@Pipe({ name: 'customPipe', pure: false })
.
- Пользовательский канал MyPipe: это пользовательский канал Angular с именем
MyPipe
. Он реализует интерфейсPipeTransform
и используется для фильтрации массива пользовательских профилей на основе пользовательского ввода.
import { Pipe, PipeTransform } from '@angular/core'; import { IProfile } from '../profile-component/profile.model'; @Pipe({ name: 'myPipe', }) export class MyPipe implements PipeTransform { transform(value: IProfile[], userInput: string) { userInput = userInput ? userInput.toLowerCase() : ''; return userInput ? value.filter( (data) => data.firstname.toLowerCase().indexOf(userInput) > -1 || data.lastname.toLowerCase().indexOf(userInput) > -1 ) : value; } }
2. Ввод и отображение поиска. В шаблоне HTML есть поле ввода, в котором пользователи могут ввести свой поисковый запрос. Поисковый запрос привязывается к свойству userInput
с помощью двусторонней привязки данных ([(ngModel)]
).
<input class="form-control" type="search" id="email" placeholder="Search by user's First Name or Last Name..." [(ngModel)]="userInput" />
3. Статистика результатов поиска: шаблон отображает количество результатов поиска на основе ввода пользователя. Он вычисляет и отображает количество совпадающих результатов и общее количество пользователей.
<p> Number of search result : {{ (userslist | myPipe: userInput).length }} out of {{ userslist.length }} total users </p>
4. Таблица результатов поиска. В шаблоне используется настраиваемый канал myPipe
для фильтрации и отображения профилей пользователей, соответствующих входным данным поиска. Профили повторяются с использованием цикла *ngFor
, а сведения о каждом пользователе отображаются в строке таблицы. Сведения о пользователе также связаны со страницей его профиля и действием «Удалить пользователя».
<tr *ngFor="let user of userslist | myPipe: userInput; let index = index"> <th scope="row">{{ index + 1 }}</th> <td>{{ user.firstname }}</td> <td>{{ user.lastname }}</td> <td> <a style="color: blue" [routerLink]="['/profile', user._id]">User Details</a> || <a style="color: #ff0000" [routerLink]="">Delete User</a> </td> </tr>
5. Обработка ошибок: если совпадающие результаты не найдены, отображается сообщение красного цвета, указывающее на неверный запрос.
<div *ngIf="(userslist | myPipe: userInput).length === 0"> <p style="color: red">Bad Request, Search Again!!</p> </div>
6. Общее количество пользователей. В конце шаблона отображается общее количество пользователей в массиве userslist
.
Total users are: {{ userslist.length }}
Спасибо за чтение! Следуйте за мной на Medium, чтобы получать больше полезных статей. Если у вас есть какие-либо вопросы, оставьте их в разделе комментариев!