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

Вот несколько ключевых моментов о пользовательских каналах в Angular:

  1. Создание пользовательских каналов:
  • Вы можете создать собственный канал, реализовав интерфейс 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 }).

  1. Пользовательский канал 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, чтобы получать больше полезных статей. Если у вас есть какие-либо вопросы, оставьте их в разделе комментариев!