🎩 Понимание магии угловых элементов

Краткий обзор

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

В наши дни, благодаря пакету Angular elements, мы можем создавать собственные пользовательские элементы из компонентов Angular.

Пакет @angular/elements экспортирует createCustomElement() API, который действует как мост от интерфейса компонентов Angular и функции обнаружения изменений к встроенному DOM API.

Если вы не знакомы с веб-компонентами, рекомендую заранее прочитать эту статью.

Как преобразовать угловые компоненты в веб-компоненты

Давайте посмотрим, как мы преобразовываем AlertComponent, написанный на Angular, в веб-компонент. Сначала создадим компонент:

Этот код довольно прост. Мы используем базовый стиль начальной загрузки для предупреждений и оборачиваем его в компонент Angular. Теперь давайте скажем Angular, что мы хотим преобразовать в веб-компонент:

Мы очищаем свойство массива bootstrap и используем хук ngDoBootstrap для преобразования нашего компонента Angular в веб-компонент с помощью функции createCustomElement, передавая компонент и текущий инжектор, который мы получили через DI.

Затем мы регистрируем его в браузере, используя собственный метод customElements.define() API, передавая ему имя тега элемента и преобразованный веб-компонент.

Теперь мы можем использовать его как любой другой элемент HTML. Например, мы можем объявить его статически в нашем index.html файле:

Или создайте его динамически, используя собственный JS API, с которым мы все знакомы:

Это был краткий обзор использования веб-компонентов с Angular. Теперь, когда у нас есть основы, пора погрузиться в понимание того, как работает весь этот магический процесс. Мы сделаем это, создав собственную createCustomElement реализацию.

Воссоздание процесса создания веб-компонента

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

Для начала мы определяем класс с именем NgElement, который расширяет HTMLElement. В определении конструктора мы вызываем super(), чтобы установить правильную цепочку прототипов.

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

Это начало. Теперь давайте объявим три обратных вызова жизненного цикла компонента, которые нас интересуют:

Давайте объясним роль каждого из них. connectedCallback вызывается всякий раз, когда элемент вставляется в DOM, а disconnectedCallback вызывается всякий раз, когда элемент удаляется из DOM.

attributeChangedCallback вызывается всякий раз, когда один из наблюдаемых атрибутов элемента добавляется, удаляется или изменяется. Мы можем наблюдать атрибуты элемента, реализуя статическое свойство observedAttributes.

Давайте добавим это в наш код:

А пока оставим его пустым. Позже мы увидим, как мы заполним его именами входов компонентов Angular. Теперь, когда мы закончили скучную часть, мы готовы приступить к делу.

Создайте угловой компонент

Мы подошли к той части, где нам нужно создать компонент и добавить его в DOM. Посмотрим, как мы это сделаем:

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

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

Далее мы используем инжектор, чтобы получить ссылку на ComponentFactoryResolver провайдера. Метод resolveComponentFactory() принимает компонент и возвращает ComponentFactory. Вы можете думать о ComponentFactory как об объекте, который знает, как создать компонент.

ComponentFactory предоставляет метод create(), который принимает инжектор, многомерный массив, содержащий элементы DOM, которые должны быть спроецированы (т.е. при использовании ng-content), и элемент HTML, к которому мы добавляем шаблон компонента.

Затем мы вызываем detectChanges метод компонента и добавляем его hostView в приложение. Это гарантирует, что Angular проверяет свое представление на каждом последующем цикле компакт-диска.

Наконец, мы возвращаем ссылку на компонент.

Теперь давайте используем его в нашей customElementPlease функции:

Мы вызываем функцию initializeComponent, передавая ссылку на this, который в нашем случае является HTML-элементом <my-alert> вместе с компонентом и инжектором.

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

На этом этапе мы должны увидеть наш компонент на экране:

Мы отрендерили компонент, но пока не можем с ним взаимодействовать. Мы хотим иметь возможность использовать стандартный API веб-компонентов для установки атрибутов или свойств, а также для прослушивания событий элемента, поэтому давайте добавим эту функцию.

Преобразуйте входные данные компонента

Поскольку наш веб-компонент по своей сути является просто элементом HTML, пользователи могут устанавливать его атрибуты, либо объявив его статически в шаблоне, либо вызвав собственный метод setAttribute:

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

Итак, наша первая задача - сопоставить входные данные компонента Angular с массивом, содержащим имена входов. Посмотрим, как это сделать:

Мы используем функцию getComponentFactory(), которую мы создали ранее, чтобы получить ссылку на фабрику компонента. Одно из свойств, которое мы получаем от фабрики, - это компонент inputs. В нашем случае это будет выглядеть так:

Вы можете спросить, что это за свойство templateName. В Angular мы можем определить псевдоним для ввода, который будет именем, которое мы используем в шаблоне. Оно может отличаться от имени, которое мы используем внутри самого компонента. Например:

В нашем случае мы не используем эту функцию, поэтому propName и templateName идентичны. Теперь, когда у нас есть компонент inputs, мы можем нормализовать их в форме атрибутов HTML:

Запустив указанную выше функцию с нашими входными данными, мы получим следующий результат:

Ключи результирующего объекта - это то, что нам нужно передать свойству observedAttributes:

Теперь нам нужно подключить часть, которая обновляет наш компонент Angular всякий раз, когда изменяется один из атрибутов:

когда запускается attributeChangedCallback, достаточно установить новое входное значение и вызвать detectChanges. Давайте посмотрим на это в действии:

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

Примечание. Если вы не знаете разницы между атрибутами и свойствами, прочтите эту статью.

К счастью, чтобы добавить поддержку настраиваемых свойств, нам просто нужно добавить сеттеры и геттеры для входных данных, которые мы хотим поддерживать:

Это так просто. Давайте посмотрим, как это работает:

Теперь давайте соединим события:

Преобразуйте выходы компонента

Получение outputs компонента аналогично получению inputs:

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

Каждый раз, когда один из выходов компонента выдает значение, мы создаем настраиваемое событие, используя псевдоним и значение, и используем собственный метод dispatchEvent для отправки его всем, кто может его слушать. Теперь мы можем прослушивать любые генерируемые значения вывода, используя собственный addEventListener API:

Как это круто? 😎

Предотвратить утечку памяти

Мы не можем сделать вывод, не убедившись, что мы не создали утечек памяти. Когда компонент отсоединяется от DOM, нам нужно уничтожить его и отказаться от подписки на выходы:

То, что осталось?

Мы прошли долгий путь; Мы можем визуализировать компонент и использовать его входы и выходы в сочетании с API веб-компонентов. Мы не затронули две темы:

Первый - поддержка ngOnChanges. Вкратце, мы должны агрегировать изменения каждого входного компонента и запускать ngOnChanges(inputChanges) , когда мы запускаем detectChanges().

Второй - поддержка ng-content. В нашей реализации при создании компонента мы передали пустой массив. Вот небольшое напоминание:

В исходной реализации есть функция, которая извлекает ngContentSelectors из фабрики компонента, ищет дочерние узлы, соответствующие каждому селектору, и сопоставляет их с ожидаемым многомерным массивом типа Node[][].

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

И в качестве бонуса вы также можете изучить код, который планирует вызов detectChanges, чтобы он не запускался при каждом изменении атрибута / свойства, когда оно происходит на одном и том же тике.

Теперь, когда мы исследовали магию преобразования компонентов Angular, мы увидели, что настоящая магия заключается в обучении ✨✨✨

🚀 Вы уже пробовали акиту?

Одна из ведущих библиотек государственного управления, Akita использовалась в бесчисленных производственных средах. Он постоянно развивается и совершенствуется.

Будь то объекты, поступающие с сервера, или данные состояния пользовательского интерфейса, у Akita есть специализированные хранилища, мощные инструменты и индивидуальные плагины, которые помогают управлять данными и устраняют необходимость в огромных объемах шаблонного кода. Мы / я настоятельно рекомендуем вам попробовать.

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Akita и JS!

Вы можете найти последний пример кода здесь.