«Для работы кода недостаточно» - Роберт К. Мартин.

Эта история изначально была опубликована на сайте inDepthDev.



Самосохраняющиеся раскрывающиеся списки Angular - еще одна директива - Angular inDepth
'Недостаточно для работы кода' - Роберт С. Мартин Директива Angular - это мощный шаблон, предоставляемый … indepth.dev



Директива angular - это мощный шаблон, предоставляемый фреймворком, который можно использовать для добавления дополнительных поведений к элементам. В этой статье мы создадим настраиваемую директиву Angular, чтобы включить самосохранение (автосохранение) для выпадающих элементов.

Что такое самосохраняющееся раскрывающееся меню?

Рассмотрим этот простой сценарий в примере приложения, в котором есть раскрывающийся список для определения половой возрастной группы человека. Естественная и эффективная реализация этого случая - использовать раскрывающийся список с параметрами. Обычно используется форма с раскрывающимся списком и кнопкой отправки. Но что, если это раскрывающееся меню не является частью более крупной HTML-формы? Что, если это единственный элемент выбора на странице без кнопки сохранения? В некоторых случаях вы можете не захотеть, чтобы пользователь нажимал кнопку, чтобы инициировать сохранение, поскольку это может вызвать трение.

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

Здорово! Теперь, как сообщить пользователю, что это изменение вызвало сохранение? Как мы сообщаем пользователям об ошибке?

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

Перейдем к делу

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

Выглядит круто, не так ли?

Давайте теперь обрисуем план

  1. Директива должна принимать входные данные, относящиеся к HTTP-вызову, выполняемому серверной частью.
  2. Когда элемент хоста запускает событие «change», нам нужно, чтобы слушатель запустился.
  3. Перед подпиской нужно показать загрузчик
  4. Нужно удалить загрузчик, добавить зеленую галочку при успешном звонке
  5. Необходимо удалить отметку через одну секунду
  6. В случае сбоя необходимо показать значок ошибки рядом с полем выбора

На диаграмме

Блок-схема - самосохраняющиеся раскрывающиеся списки

Начнем с создания директивы Angular с помощью Angular CLI.

ng generate директива самосохранения

У нас будет только один вход в эту директиву, т.е.

@Input(‘observableFn’)
 observableFn!: () => Observable<any>;

ObservableFn будет иметь ссылку на HTTP-запрос, который должен быть выполнен для сохранения этих конкретных данных. Мы будем передавать эту информацию от родителя, в котором будет использоваться эта директива.

Теперь давайте добавим ElementRef, Renderer2 и Document

constructor(
 private elRef: ElementRef,
 private renderer: Renderer2,
 @Inject(DOCUMENT) private document: Document
 ) {}

Мы будем использовать эти зависимости для

  1. ElementRef - ссылка на основной элемент
  2. Renderer2 - прикрепить текстовый элемент ошибки в случае ошибки
  3. Документ- ссылка на документ

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

@HostListener(‘change’)
 onChange() {
 // Do all craziness
 }

Давайте сейчас приступим к реализации самосохраняющего поведения,

Мы используем elementRef, чтобы захватить собственный элемент хоста (элемент выбора), поскольку нам нужно манипулировать им в процессе. Затем мы подписываемся на наблюдаемое, которое уже передано в качестве входных данных, путем вызова функции ввода. Здесь есть два вспомогательных метода, которым мы передаем элемент select. Давайте теперь посмотрим, как они реализуются.

Этот код следует исходной блок-схеме, которую мы создали. т.е. при изменении значения раскрывающегося списка,

  1. Добавляет загрузчик к элементу, чтобы указать, что сохранение выполняется.
  2. Получает наблюдаемый HTTP и подписывается

При успехе

  1. Удаляет фон загрузчика
  2. Добавить значок галочки успеха
  3. Удалите значок галочки через 1 секунду

И в случае неудачи

  1. Создайте фиктивный элемент div для хранения текста ошибки
  2. Заполнено innerText как сообщение об ошибке, полученное от сервера
  3. Используйте Renderer, чтобы добавить этот дочерний элемент к родительскому узлу, чтобы сообщение об ошибке не отображалось под раскрывающимся списком.

Давайте теперь реализуем эти вспомогательные методы, которые мы использовали выше,

Чтобы добавить загрузчик в раскрывающийся список

То же самое можно сделать, чтобы добавить индикатор успеха,

Теперь, чтобы реализовать метод addBackground(),

Мы можем просто установить для фона элемента значение none, чтобы удалить фон.

Теперь, чтобы использовать эту директиву для любого элемента select,

Давайте также создадим метод post(), который возвращает функцию, которая возвращает наблюдаемый HTTP.

Вы можете поиграть с проектом stackblitz здесь.

Заключение

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