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

Ага, верно, случайное нажатие кнопки. Мы же не хотим, чтобы это произошло, не так ли?

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

TL; DR: если вас интересует только использование этого компонента, а не обязательно его создание, найдите проект здесь.

Чтобы продолжить, вам необходимо иметь понимание Angular на начальном уровне. Если вы еще этого не сделали, установите Angular с помощью npm install -g @angular/cli.

Обратите внимание, что я использую Angular версии 6.0.3. У вас могут возникнуть проблемы с зависимостями, если вы используете другую версию, которую можно решить с помощью совместимых версий зависимостей (вы можете обратиться к Angular GitHub за помощью в поиске совместимой версии).

Начало работы

Начнем с создания нового проекта Angular.

ng new ays

Теперь, если вы используете ту же версию Angular, что и я, в каталоге проекта запустите npm install --save [email protected], чтобы установить совместимую версию RxJs.

Убедитесь, что проект запущен, запустите ng serve и перейдите по адресу http: // localhost: 4200 в своем браузере.

Если вы видите экран выше, все готово! Теперь нам нужна кнопка, при нажатии на которую открывается модальное окно с текстом «Вы уверены?» И две кнопки для «Да» и «Нет». Мы создадим эту кнопку как компонент и преобразуем ее в веб-элемент.

Создание компонента AYS

ng g c ays -s -t -v None

«G» - сокращение от «Generate», «c» - от «Component». ays - это имя компонента. Флаг -s говорит, что компонент будет иметь встроенный стиль, а флаг -t говорит, что компонент будет иметь встроенный шаблон. Мы делаем это для того, чтобы объединить элемент в один файл. -v None устанавливает для параметра View Encapsulation значение None. (Angular не будет создавать теневую DOM для инкапсуляции стилей или использовать встроенную инкапсуляцию)

Теперь вы увидите папку с названием ays в src/app/ вашего проекта. Это ваш недавно созданный компонент. Из модальных окон мне очень нравится tingle.js. У него как раз достаточно функциональности с возможностью настройки для нашей задачи. Мы будем использовать файлы CSS и JS для создания нашего модального окна.

Создайте файл tingle.js в каталоге компонентов, то есть src/app/ays/tingle.js. Вставьте содержимое отсюда в этот файл.

Теперь давайте изменим файл ays.component.ts следующим образом.

Давайте попробуем этот компонент! Откройте app.component.html и замените содержимое следующим:

<ays (select)="handleClick($event)"></ays>

Мы создаем довольно простую версию компонента со слушателем handleClick. Теперь откройте app.component.ts и давайте создадим функцию handleClick, которая будет просто выводить полученное событие на консоль.

handleClick(e) {
   console.log(`Received event: ${e}`)
}

Теперь посетите http://localhost:4200, и вы должны увидеть следующее:

Теперь нам нужно экспортировать этот компонент как веб-элемент. К счастью, с Angular это очень просто.

На вашем терминале запустите:

ng add @angular/elements
npm i -S [email protected]

Это добавит элементы Angular в ваш проект, вы должны увидеть что-то подобное в выводе вашего терминала.

После добавления элементов Angular измените app.module.ts для создания нашего веб-компонента вместо начальной загрузки нашего приложения. Замените свой app.module.ts следующим образом:

Теперь мы готовы упаковать наш веб-компонент. Теперь, когда вы создаете приложение Angular с помощью Angular CLI, как показано ниже:

ng build --prod

У вас 5 файлов (и ошибка), вот так

Поскольку наши стили встроены, нам не нужно включать styles.<hash>.css в наш набор веб-компонентов (если вы мне не верите, просто откройте файл и убедитесь сами: P). Нам нужно добавить оставшиеся 4 файла как один файл js, поэтому у нас не должно быть хэшей в именах файлов, чтобы они были предсказуемыми, и мы могли бы создать сценарий для их объединения. Опять же, это легко сделать с помощью Angular CLI. Нам также не нужен app.component.ts, поскольку мы его не используем. Итак, давайте удалим это, используя:

rm src/app/app.component.*

Тогда беги,

ng build --prod --output-hashing=none

На этот раз вы должны увидеть результат без хешей,

Отлично, а теперь давайте создадим сценарий для извлечения нашего веб-компонента в виде одного файла. В каталоге вашего проекта создайте файл с именем build-element.js и поместите в него следующий код.

Установите зависимости:

npm i -D fs-extra concat

Сценарий просто добавляет содержимое выходных файлов в один файл (установка дополнительных пакетов только для этого может показаться излишним, но в этом случае это не зависит от платформы). Итак, создание сборки веб-компонента - это двухэтапный процесс:

ng build --prod --output-hashing=none
node build-element.js

Давайте изменим нашу build команду в package.json следующим образом.

"build": "ng build --prod --output-hashing=none && node build-element.js"

Теперь, если вы сделаете npm run build, вы увидите новую папку в каталоге вашего проекта с именем ays с файлом element.js. Это ваш веб-компонент!

Тестирование веб-компонента

Создайте index.html со следующим содержанием:

Теперь откройте этот файл в своем любимом браузере, и вы должны увидеть следующее:

Не беспокойтесь о неприличном зеленом цвете. Это просто, чтобы показать, что вы можете настроить это как хотите. Посмотрите этот более трезвый пример:

Посмотрите мой проект GitHub, если хотите его проверить. Если у вас возникнут трудности или возникнут вопросы, оставьте комментарий ниже!