Одна из функций, выпущенных в Angular 6, - это Angular Elements. Элементы Angular - это компоненты Angular, упакованные как пользовательские элементы. Это веб-стандарт для определения новых элементов HTML независимо от фреймворка.
Краткий обзор настраиваемых элементов:
Это функция веб-платформы, которая в настоящее время поддерживается Chrome, Opera, Safari, а также доступна в других браузерах через Polyfills. Пользовательский элемент расширяет HTML, позволяя вам определять пользовательский тег, содержимое которого создается и контролируется кодом JavaScript.
Проще говоря, пользовательский элемент - это веб-компонент, который представляет собой не что иное, как создание нового HTML-тега, например ‹P›, ‹H1› и т. Д.,
В глобальном масштабе, поскольку сегодня в техническом стеке доступно множество расширенных фреймворков JavaScript, мы можем подготовить эти пользовательские элементы с помощью чистого JavaScript и путем расширения HTML. Вы можете узнать больше здесь.
Давайте посмотрим, как эти пользовательские элементы создаются в Angular и как Angular обрабатывает эти элементы. Обычно браузер поддерживает CustomElementRegistry, который сопоставляет пользовательский элемент в теге HTML с экземпляром класса JavaScript.
Пакет для создания настраиваемого элемента - это @ angular / elements, и этот пакет экспортирует API createCustomElement (). Метод createCustomElement () будет действовать как мост между интерфейсом компонентов Angular и функцией обнаружения изменений встроенным DOM API.
Шаги по созданию пользовательского элемента в Angular6:
1. Создайте компонент с помощью команды Angular CLI.
2. Внесите необходимые изменения в файлы .html, .ts.
3. Перейдите в файл app.module.ts
4. В метаданных декоратора @NgModule добавьте новое свойство с именем entryComponents и добавьте вновь созданный компонент в этот массив.
Пример:
@NgModule ({
объявления: [AppComponent, PopupComponent],
импорт: […],
поставщики: […],
bootstrap: [AppComponent],
entryComponents: [PopupComponent],
})
Это все об элементе angular., Постараюсь подготовить рабочий пример и поделиться вами как можно скорее.
Удачного изучения Angular !!!
