Тизер:

Все мы знакомы с компонентами: самым мощным строительным блоком в экосистеме Angular. Компоненты - это то место, где рендерится Dom, внедряются сервисы, перерисовываются представления с обнаружением изменений. Компоненты могут принимать значения в качестве входов и запускать события в качестве выходов. Но проблема в том, что этот красивый блок пока работает только внутри экосистемы Angular. Я бы хотел, чтобы мы могли помочь человечеству, используя угловые компоненты даже за пределами угловой экосистемы.

Да! Из Angular 7 в Angular появилась функция «Angular Element». Теперь угловой компонент можно экспортировать как отдельный веб-компонент. Мы можем использовать его точно так же, как типичный HTML-тег, такой как div или span, на любой HTML-странице, CMS или даже внутри проекта React или Vue.js.

Как это работает:

Веб-компонент - это веб-стандарт для определения нового настраиваемого HTML-элемента в браузере. Браузеры поддерживают реестр под названием customElementRegistry. Используя метод CustomElementRegistry.define (), мы можем зарегистрировать внутреннюю строку и класс, определяющий ее поведение.

Пакет Angular @ angular / elements предоставляет метод createCustomElement, который преобразует компонент angular и его зависимости в класс, совместимый с веб-компонентом.

В настоящее время веб-стандарт поддерживается всеми браузерами Chrome, Firefox, Safari и Opera. Мы также можем сделать его работоспособным в других браузерах с помощью полифилов.

Случаи применения:

Есть как минимум 3 варианта использования, в которых мы можем использовать экспортируемые полнофункциональные компоненты angular в качестве веб-компонентов:

  • Микро-передняя часть
  • Миграция устаревшего кода
  • Веб-компоненты Plug & Play для сторонних сервисов

Микро-передняя часть:

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

Миграция:

В проектах, написанных на Angular 1.x, переход на Angular всегда был проблемой. Нет простого волшебного заклинания, похожего на обновление нг. То же самое верно и для случая, когда кто-то хочет перенести свой проект на Angular с React или Vue. Здесь лучше всего подходят веб-компоненты. Они могут постепенно преобразовывать свои существующие компоненты / контроллеры в веб-компоненты Angular и заменять их из существующей системы. После преобразования всех компонентов / контроллеров они могут просто заменить устаревшую систему на последнюю версию angular.

Сторонние сервисы:

Поставщики услуг могут предоставить веб-компоненты plug & play, которые будут прикреплены к веб-сайтам своих клиентов без каких-либо дополнительных разработок.

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

Пример проекта:

Вот пример кода, который мы пишем для веб-компонента my-todo-list. К вашему сведению, вы можете проверить весь код здесь, в Github.

Шаг 1. Напишите компонент и сервис

  • Компонент TodoList для отображения списка задач.
  • TodoService для извлечения задач из JSON API заполнителя.
  • Компонент TodoList будет принимать «имя» в качестве входных данных.
  • Компонент TodoList вызовет событие onTodoComplete, когда любое задание будет помечено как выполненное.

Шаг 2. Настройте app.modules для экспорта компонента списка дел.

  • Поскольку проект будет использоваться только для экспорта модулей angular в качестве веб-компонента, нам не нужна начальная загрузка через компонент приложения.
  • Мы должны объявить наш экспортируемый компонент списка дел как входные компоненты.
  • Установите пакет @ angular / elements.
  • Внутри хука ngDoBootstrap мы используем метод createCustomElement для компиляции нашего компонента TodoList как стандартного веб-компонента.
  • Компонент TodoList зависит от TodoService. Поскольку он будет использоваться вне экосистемы angular, нам нужно передать инжектор зависимостей вручную, чтобы он мог загружать зависимости.

Шаг 3. Объединение

  • Теперь, если мы запустим build - файлы будут сгенерированы в папке «dist». Поскольку мы хотим использовать это в другой экосистеме, лучше объединить файлы в один выходной файл. Поэтому добавьте эти команды в раздел сценария package.json: -
"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js",
"concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js",
"concat": "npm run concat-es5 && npm run concat-es2015",
"build": "ng build --prod --output-hashing=none && npm run concat",
  • Теперь, если мы запустим команду npm run build, два отдельных файла output-es5.js и output-es2015.js будут созданы внутри output папка .

Шаг 4. Используйте как веб-компонент

  • Теперь все готово. Мы можем использовать эти выходные файлы в качестве нашего автономного веб-компонента следующим образом: -

  • Если мы запустим эту HTML-страницу, мы увидим, что список задач будет извлечен и показан.
  • Мы передали имя в качестве входных данных, мы можем видеть имя внутри веб-компонента - это означает, что входные данные компонента, обнаружение изменений работают!
  • После того, как мы отметим / снимем отметку с любого дела, данные о событиях и задачах будут регистрироваться в консоли. Так что выходное событие тоже работает!

Таким образом, мы можем использовать угловой компонент в любом другом проекте. Вы можете попробовать сами клонировать код из Github.

Ссылка:

Не стесняйтесь оставлять здесь свои комментарии или ловить меня в твиттере @asad_rahman.

Посетите наш сайт, чтобы узнать о нас больше:
www.monstar-lab.co.bd