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