Программная инженерия

Создайте пользовательское угловое приложение с автозаполнением поиска с помощью динамической таблицы

Поиграйте с CSS-оверлеем и компонентами Angular Material

Потому что проблемы, с которыми мы сталкиваемся, никогда не закончатся.

И потому что, как программисты, мы никогда не перестанем учиться и совершенствоваться.

Потому что веб-разработка - это искусство и игра, в которую мы можем играть по правилам.

По этим причинам сегодня мы реализуем настраиваемое автозаполнение, которое отображает динамическую таблицу в ее оверлее, и экспортируем ее как библиотеку Angular, как показано в следующем видео:

  • Число, тип и имена столбцов передаются в качестве входных данных в динамическую таблицу.
  • Компонент, содержащий настраиваемое автозаполнение, предоставляет список данных для таблицы. Этот список может быть статическим или динамическим (наблюдаемый).
  • Пользователь может выбрать опцию из отображаемого списка опций щелчком мыши или перемещаясь с помощью стрелок клавиатуры и нажимая клавишу Enter. Когда нажата стрелка вниз или вверх, опция в списке, у которой есть фокус, выделяется, чтобы улучшить взаимодействие с пользователем.
  • Всякий раз, когда выбирается опция, в хост-компонент возвращается событие.
  • Каждый раз, когда пользователь меняет поисковый запрос, компоненту хостинга также возвращается событие, что очень полезно, например, в случае, если мы хотим получить новый список данных с HTTP-сервера.

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

Итак, приступим.

Создать новую библиотеку

Наш настраиваемый модуль автозаполнения будет создан как библиотека в папке projects. Вы можете ознакомиться с исходным кодом, доступным на GitHub здесь. Перейдите в корневую папку проекта и выполните в терминале следующую команду:

ng generate library custom-autocomplete

Создайте компоненты библиотеки

При генерации наших компонентов мы должны указать флаг --project, чтобы сообщить Angular CLI, чтобы они сгенерировали их в соответствующей папке библиотеки. Для достижения сегодняшней цели нам нужны два компонента:

ng generate component components/option-search-overlay --project=custom-autocomplete --export
ng generate component components/mat-dynamic-table --project=custom-autocomplete --export
ng generate directive directives/click-outside --project=custom-autocomplete
ng generate pipe pipes/get-total --project=custom-autocomplete

Компонент Option-Search-Overlay

Первый компонент, option-search-overlay, отображает поле ввода, в которое пользователь может ввести поисковый запрос, и автоматически открывает оверлей, который показывает правильный результат для данного фильтра. Вот как выглядит шаблон:

И часть TypeScript:

Есть пять слушателей клавиатуры:

  • Два слушателя для keydown.arrowdown и keydown.arrowup для навигации по списку опций
  • Один слушатель для клавиши keydown.enter для выбора варианта
  • Один слушатель для клавиши keydown.esc, чтобы закрыть оверлей, если он открыт
  • Один слушатель для keydown в поле формы input, чтобы открывать оверлей, когда пользователь запускает t

Как вы могли заметить, второй компонент mat-dynamic-table является потомком первого option-search-overlay.

Когда пользователь начинает вводить текст в поле input, мы визуализируем элемент DOM ng-template, содержащий динамическую таблицу. Для этого мы используем пакет overlay из Angular CDK, который позволяет открывать плавающие панели на экране:

import { OverlayModule } from '@angular/cdk/overlay';

Вот отрывок с сайта javatpoint.com, объясняющий, что такое оверлей и как их использовать:

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

Создание эффекта наложения означает соединение двух div в одном месте, но при необходимости они появятся. Чтобы появился второй div, мы можем навести указатель мыши на один div или щелкнуть по нему ».

Давайте посмотрим на более наглядное представление наложения и посмотрим, как его реализовать с помощью Angular Material:

Я добавил следующие атрибуты в поле формы input:

cdkOVerlayOrigin #trigger=”cdkOverlayOrigin”

К тегу ng-template я добавил один атрибут и два поля ввода:

cdkConnectedOverlay
[cdkConnectedOverlayOrigin]=”trigger” [cdkConnectedOverlayOpen]=”isOverlayOpen”
  • Значение trigger связывает элемент ng-template DOM с полем формы input
  • Значение isOverlayOpen инициализируется с помощью false в option-search-overlay.component.ts, затем обновляется в зависимости от состояния наложения:

Чтобы этого избежать, наложение остается открытым, когда пользователь покидает его, не выбрав параметр. Я использовал директиву clickOutside, которая обнаруживает любой щелчок по document за пределами элемента DOM, в котором используется эта директива. В таком случае будет выполнен метод closeOverlay():

Компонент динамической таблицы

Второй компонент, mat-dynamic-table, представляет собой динамическую таблицу материалов, то есть не зависит от списка столбцов. В шаблоне у нас есть цикл по списку displayColumnDefs для определения имени, метки, значения и типа каждого столбца:

Вот часть TypeScript:

Чтобы вычислить сумму в нижнем колонтитуле таблицы для столбцов типа number, я создал канал getTotal. Труба намного лучше по производительности, чем по методу. Я показываю нижний колонтитул только в том случае, если параметр hasFooter равен true в определении столбца:

Использование библиотеки в представлении создания заказа

Все, что нам нужно сейчас, чтобы увидеть результат того, что мы реализовали до сих пор, - это обновить форму на первом этапе создания заказа, вставив option-search-overlay в качестве нового поля:

Мы должны настроить компонент T ypeScript, добавив массив displayColumnDefs, который определяет список столбцов для наложения автозаполнения. Нам также нужно определить optionSearchConfig:

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

Хотите попробовать сами?

Идите вперед и клонируйте окончательное и полноценное решение, доступное в этом репозитории GitHub.

Исходный код поддерживает отображение столбца checkbox в mat-dynamic-table. Очень полезно иметь функцию множественного выбора для нашего автозаполнения поиска.

Следующая часть для этого приложения доступна здесь:



Создайте веб-приложение для определения положения рук на основе машинного обучения
Объедините машинное обучение и веб-разработку betterprogramming.pub



Спасибо за прочтение! Я надеюсь, что это было полезно и вдохновляло в вашем путешествии по программированию.

🧠💡 Я пишу о технике, технологиях и лидерстве для сообщества умных и любопытных людей. Подпишитесь на мою бесплатную рассылку новостей по электронной почте для эксклюзивного доступа или подпишитесь на Medium здесь.