Это очень простой компонент для добавления функции чтения QR-кода или штрих-кода в Angular WebApp, он будет работать практически для любого устройства с камерой и браузером. Использование HTTPS в производственных средах является обязательным, поэтому пользователю предлагается предоставить разрешение на использование камеры.
Компонент будет работать следующим образом: если он будет принят, с левой стороны (или на виде сверху на мобильном устройстве) будет квадрат камеры, готовый для сканирования представленных кодов, а на правой стороне (или на виде снизу на мобильном устройстве) будет отображаться информация, считываемая из QR-кода, и, кроме того, некоторая информация, полученная из серверной части через службу.
Итак, в качестве первого шага мы устанавливаем пакет в наше приложение с помощью NPM, а после этого нам нужно импортировать ZXing в модуль.
npm i @zxing/ngx-scanner@latest --save
Следующие два объекта являются моделями, определенными для взаимодействия запросов и ответов со стороной сервера.
Это html и css часть компонента, в основном мы определяем адаптивное поведение во фрагменте страницы, и мы вставляем тег zxing-scanner, раздел * ngIf будет определять, должна ли камера быть активной, и мы также определяем метод для позвоните, когда QR-код будет успешно отсканирован.
Это компонент TypeScript. Когда вызывается функция scanSuccessHandler, мы используем службу angular для вызова серверной части, и после получения ответа мы обновляем значения и представляем информацию. Есть некоторые параметры конфигурации, которые вы можете настроить при использовании ZXing, здесь мы не устанавливаем ничего, кроме конфигурации по умолчанию.
И, наконец, это сервис angular, который взаимодействует с REST API в бэкэнде, чтобы регистрировать событие и получать связанную информацию.
