Элементы Angular — это компоненты Angular, упакованные как настраиваемые элементы (также известные как веб-компоненты). Веб-стандарт для определения нового HTML-элемента независимо от фреймворка. — Угловые документы
Говоря о веб-компонентах, существует набор API-интерфейсов веб-платформы, которые позволяют нам создавать новые настраиваемые, повторно используемые и инкапсулированные теги HTML, которые можно встраивать в любые веб-страницы или платформы, работающие на JavaScript.Интересно. Компоненты и виджеты основаны на стандартах веб-компонентов.
И вы заметили, что в определении угловых документов элемента angular есть один термин пользовательские элементы, если вы не знаете о тогда они являются функцией веб-платформы, которая позволяет нам создавать простой HTML-элемент, функции и код которого будут создаваться и поддерживаться с помощью JavaScript. Интерфейс CustomElementRegistry отвечает за регистрацию пользовательского компонента, а также за запросы элементов.
Пользовательские элементы ведут себя так же, как обычные HTML-теги, которые могут загружаться сами по себе после добавления в DOM и уничтожаться после удаления из DOM.
Одно из самых больших преимуществ использования элемента angular: создайте один раз и используйте где угодно
Теперь, когда фронтенд-приложения становятся все более сложными, и мы вводим микро-фронтенд-структуры для решения наших бизнес-задач, угловой элемент может помочь нам создать микро-фронтенд-приложение. Мы можем преобразовать наше приложение в угловой элемент, который будет легко доступен в браузерах. Это может позволить нам перенести нашу инфраструктуру угловых приложений в браузер с помощью функции настраиваемого элемента.
Давайте углубимся в создание простого элемента angular, я воспользовался официальной документацией Angular.
- Установка: Установите элементы Angular с помощью команды cli —
`npm install @angular/elements` - Конфигурация. Настройте элемент angular и создайте пользовательские элементы.
Инъекторы сообщают нам, где и как формируется услуга. Мы внедряем компонент приложения в элемент с помощью API createCustomElement("имя компонента", инжектор). Этот API отвечает за создание пользовательского элемента путем преобразования углового компонента.
Затем с помощью customElement.define() мы определяем наш тег. Здесь мы дали имя «app-angular-element» (здесь следует отметить, что лучше всего давать дефис для определения элемента). Таким образом, всякий раз, когда мы будем использовать этот тег в нашей DOM, пользовательский элемент будет передан туда.
ngDoBootstrap() заменяет массив начальной загрузки в модуле Ng. Интересно, что этот хук вызывается, когда в нашем ngModule отсутствует массив начальной загрузки.
3. Теперь мы сделаем сборку элемента angular, чтобы мы могли использовать его где угодно.
ng build
Вы получите одну папку сборки, в которой будут присутствовать файлы сборки. Теперь для упрощения того, что вы делаете, вы объединяете все main.js, runtime.js и polyfills.js в один файл JS, или вы можете включить все файлы в angular.json. Теперь все готово к работе. Следует отметить, что мы должны включать все файлы стилей и JS в файл angular.json, где бы мы его ни использовали.
4. Скопируйте эту папку сборки в свое приложение, где вы хотите ее использовать.
вставьте путь CSS и JS в angular.json.
Теперь ваш угловой элемент готов для просмотра в другом приложении.
Эта CUSTOM_ELEMENTS_SCHEMA определяет схему, которая позволяет нам иметь определенные свойства:
1. Неугловой элемент с дефисом (-)
2. Элемент свойства с регистром тире (-).
Регистр тире используется для соглашений об именах.
Вывод: Итак, элемент Angular — отличная функция для повторного использования определенной части одного приложения в другом приложении. Что может помочь нам в создании микро-интерфейсных приложений.
sannanansari/angular-elements (github.com) — Мой репозиторий GitHub для реализации угловых элементов.
Angular — Обзор элементов Angular
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
