Использование веб-компонентов в Angular

Использование веб-компонентов в Angular

От автора: Angular – фреймворк, любимый многими в сообществе JS. Angular предоставляет библиотеку для создания инкапсулированных компонентов, вставку зависимостей, создание языковых шаблонов с назначением данных, роутер приложения, построенный на observables, а также интерфейс командной строки с низким порогом входа. Этот фреймворк не такой гибкий, как другие, однако упрямый характер Angular позволяет большим командам кодить по существующим стандартам, а не разрабатывать свои. Также Angular упрощает разделение логики отображения (компоненты) от бизнес логики (сервисы и логика), поэтому несколько команд может работать над разными частям приложения.

Веб-компоненты

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

Angular

Angular 2+ делает много тяжелой работы за вас, компилируя шаблон компонента в рендерер JS и синхронизируя данные между ним и объектом компонента. Делается это через однонаправленный поток данных и менеджер жизненных циклов, который определяет изменения в свойствах компонента и указывает, какой шаблон необходимо заново отрендерить. Язык шаблонов Angular – это в основном HTML с синтаксическим сахаром, поэтому компилятор уже знает, как создавать узлы DOM по тегам в шаблоне. По умолчанию компилятор понимает только стандартные теги HTML и компоненты Angular, зарегистрированные в приложении. Как только компилятор Angular узнает о веб-компонентах, в приложении сразу можно использовать любой веб-компонент, зарегистрированный в браузере, как родной HTML элемент.

Начнем с генерации проекта с помощью angular-cli (полный код) и будем использовать те же веб-компоненты, что и в уроке по веб-компонентам в React. Начнем.

Активация веб-компонентов

Во-первых, давайте активируем веб-компоненты в нашем проекте в src/app/app.module.ts:

Сначала мы импортировали CUSTOM_ELEMENTS_SCHEMA из @angular/core и добавили ее в объявление @NgModule приложения в свойстве schemas. Так мы разрешаем компилятору шаблонов Angular веб-компоненты и их атрибуты. Также мы импортировали наши веб-компоненты, и они зарегистрировались браузером. Так как веб-компоненты – это JS файлы, то нам нужно сказать TypeScript, чтобы тот разрешил импорт JS файлов в tsconfig.json:

Мы добавили свойство compilerOptions.allowJs и установили ему значение true. Теперь мы можем использовать веб-компоненты в приложении Angular и компонентах.

Использование компонентов в шаблоне

Теперь когда компилятор Angular знает, что нужно разрешить наши кастомные теги, мы можем использовать веб-компоненты в любом шаблоне проекта. Начнем с добавления очень простого компонента статичных вкладок в src/app/app.component.html:

Этот простой компонент вкладок использует первую версию рекомендаций веб-компонентов. Компонент x-tabs создаст маркированный список с заголовками x-tab, которые будут отвечать за каждую вкладку. Как видите, в разметке не сказано, где и как ul будет отрисован, что делает его хорошим компонентом, так как часть компонента генерируется динамически. В компоненте есть события, которые будут запущены, динамически генерируя разметку внутри компонента и модифицируя структуру DOM.

Обработка событий и коллекций

Когда закрывается вкладка, которую можно закрыть, компонент x-tabs запускает событие tabclosed. Обработка событий веб-компонентов следует тому же подходу, который используется в событиях компонентов Angular. Мы изменим наш шаблон (src/app/app.component.html), чтобы прикрепить событие:

И добавим метод onTabClosed в наш компонент (src/app/app.component.ts):

При запуске приложения клик по кнопке закрытия первой вкладки запускает наш обработчик события и логирует узел x-tab, который был удален.

Так как Angular видит веб-компоненты как компоненты первого уровня, мы можем с помощью декоратора @ViewChildren собрать вкладки с шаблона. Нам нужно изменить шаблон и добавить в узлы x-tab идентификаторы:

Добавим свойство с декоратором @ViewChildren в наш компонент:

Теперь если открыть приложение в Augury, то можно заметить, что свойство tabs наполнено объектами ElementRef, в которых хранятся ссылки на компоненты x-tab:

Использование веб-компонентов в Angular

Встает одна проблема: при закрытии первой вкладки не обновляется коллекция tabs. Так происходит потому, что шаблон приложения не обновляется, когда изменяется нижележащий DOM (как наш компонент x-tabs). Если запустить повторный рендеринг компонента, это откроет закрытую вкладку.

Управление вкладками

В простом приложении без закрываемых вкладок компонент x-tabs будет работать сразу же. Тем не менее, если нам нужны закрываемые вкладки, которые можно отслеживать в Angular, нам нужно управлять неким состоянием и позволить Angular отслеживать рендеринг компонентов x-tab. Сначала мы изменим наш шаблон приложения и добавим в него новый набор вкладок (для этого урока) и с помощью ngFor сгенерируем их из массива объектов (tabObjects).

Затем мы добавим в компонент массив tabObjects, коллекцию для хранения наших элементов statefulTab, а также обработчик события onStatefulTabClosed:

Так как мы генерируем компоненты x-tab из массива tabObjects, любые изменения в нем внутри обработчика события вызовут повторный рендеринг. Также нам нужно отключить стандартное поведение события tabclosed (удаление x-tab и li), так как Angular будет делать это автоматически. Если заглянуть в Angular после клика по кнопке закрытия первой вкладки в наших stateful вкладках, можно увидеть, что Angular обновляет коллекцию statefulTabs, чтобы она совпадала с текущим состоянием компонента:

Использование веб-компонентов в Angular

Заключение

Работать с веб-компонентами в приложении Angular и компонентах так же легко, как использовать компоненты Angular. Синтаксис шаблона, назначение свойств и механизмы обработки событий уже знакомы разработчикам Angular и будут работать как со сторонними веб-компонентами, так и с компонентами Angular. В почти всех случаях можно обойтись без создания блока-обертки.

Веб-компоненты обеспечивают значительный потенциал взаимодействия компонентов между фреймворками. Будем надеяться, что все современные фреймворки упростят импорт веб-компонентов, как это сделал Angular, и позволят разработчикам приложений легко использовать компоненты в множестве разных современных контекстов.

Автор: Bryan Forbes

Источник: //www.sitepen.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: