Угловые элементы

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

Угловые элементы - это угловые компоненты, упакованные как пользовательские элементы, веб-стандарт для определения новых HTML-элементов без учета фреймворка.

Пользовательские элементы - это функция веб-платформы, которая в настоящее время поддерживается в Chrome, Firefox, Opera и Safari и доступна в других браузерах через полифиллы. Пользовательский элемент расширяет HTML, позволяя вам определять тег, содержимое которого создается и контролируется кодом JavaScript. Браузер поддерживает CustomElementRegistry определенных пользовательских элементов (также называемых веб-компонентами), который отображает инстанцируемый класс JavaScript в тег HTML.

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

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

Использование пользовательских элементов

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

Простой динамический контент в приложении Angular

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

Содержательные приложения

Если у вас есть приложение с богатым контентом, пользовательские элементы позволяют вам предоставлять поставщикам контента сложные функциональные возможности Angular, не требуя знания Angular.

Как это устроено

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

Код TypeScript:

`<my-popup message="Use Angular!"></my-popup>`

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

Преобразование компонентов в пользовательские элементы

Angular предоставляет функцию createCustomElement () для преобразования компонента Angular вместе с его зависимостями в пользовательский элемент. Функция собирает наблюдаемые свойства компонента вместе с функциональностью Angular, которую браузер должен создавать и уничтожать экземпляры, а также обнаруживать и реагировать на изменения.

Процесс преобразования реализует интерфейс NgElementConstructor и создает класс конструктора, который настроен на создание самозагружающегося экземпляра вашего компонента.

Используйте функцию JavaScript customElements.define () , чтобы зарегистрировать настроенный конструктор и связанный с ним тег пользовательского элемента в браузере CustomElementRegistry . Когда браузер обнаруживает тег для зарегистрированного элемента, он использует конструктор для создания экземпляра пользовательского элемента.

картографирование

Пользовательский элемент содержит компонент Angular, обеспечивающий мост между данными и логикой, определенной в компоненте, и стандартными API-интерфейсами DOM. Свойства и логика компонентов отображаются непосредственно в атрибуты HTML и систему событий браузера.

API создания анализирует компонент в поисках входных свойств и определяет соответствующие атрибуты для пользовательского элемента. Он преобразует имена свойств, чтобы сделать их совместимыми с пользовательскими элементами, которые не распознают различия в регистре. Полученные имена атрибутов используют разделенные дефисом строчные буквы. Например, для компонента с параметром inputProp @Input ('myInputProp') соответствующий пользовательский элемент определяет атрибут my-input-prop.

Выходные данные компонента отправляются как пользовательские события HTML, а имя пользовательского события совпадает с именем выхода. Например, для компонента с @Output () valueChanged = new EventEmitter () соответствующий пользовательский элемент будет отправлять события с именем «valueChanged», а передаваемые данные будут сохраняться в свойстве detail события. Если вы предоставляете псевдоним, это значение используется; например, @ Output ('myClick') clicks = new EventEmitter <string> (); приводит к событиям отправки с именем «myClick».

Предыдущая: Динамические компоненты
Далее: Атрибуты Директивы