
Содержание статьи
от Prateek Mishra
6 шагов для создания элементов Angular с помощью Angular CLI

Элементы Angular – это компоненты Angular, несущие минимизированную версию всего фреймворка. Они позволяют создавать пользовательские элементы (один из веб-компонентов) независимым от фреймворков способом. Их можно использовать в простых веб-проектах, но с возможностями Angular внутри.
Прочитав официальную документацию для частей Angular, я сообразил, что в ней отсутствует часть реализации в структурированном виде. Вот почему я указываю шаги, чтобы начать!
1. Установите Angular CLI 6 и создайте новый проект
npm i -g @angular/cli
ng new angular-custom-elements
Поскольку Angular представил концепцию пользовательских элементов в Angular 6, мы должны иметь версию 6 или более позднюю версию. Вы также можете добавить--style
флажок — установка расширения стиля по умолчанию.
2. Добавить пакет элементов
Пользовательские элементы не полностью реализованы всеми браузерами. Поэтому нам нужны Polyfils, чтобы они работали. С помощью новой команды CLI ng add
вы можете добавить библиотеку Angular и необходимые полизаполнения:
ng add @angular/elements
3. Создайте компонент
Давайте создадим компонент, который будет действовать как пользовательский элемент до конца публикации:
ng g component button --inline-style --inline-template -v Native
Мы используем ViewEncapsulation.Native
чтобы предотвратить утечку стилей компонентов и влияние на другие элементы. Это отразит наш компонент в собственной реализации теневого DOM браузера (v0; для v1 мы используем ViewEncapsulation.ShadowDOM
), объединив все стили, шаблон и код класса компонентов в один файл.
4. Добавьте свойства к компоненту
После внесения нескольких изменений наш компонент кнопки выглядит следующим образом:

Согласно официальным документам:
API создания анализирует компонент, который ищет свойства ввода и определяет соответствующие атрибуты для специального элемента.
Он преобразует названия свойств, чтобы сделать их совместимыми с пользовательскими элементами, не распознающими регистр. Полученные имена атрибутов используют нижний регистр, разделенный тире. Например, для компонента с
@Input('myInputProp') inputProp
соответствующий пользовательский элемент определяет атрибут »my-input-prop”
.
А также:
Исходные данные компонента посылаются как пользовательские события HTML, при этом имя пользовательского события совпадает с названием вывода.
Например, для компонента с
@Output() valueChanged = new EventEmitter()
, соответствующий настраиваемый элемент будет отправлять события под названием «valueChanged». Выпущенные данные будут сохранены на событияdetail
собственность. Если вы укажете псевдоним, используется это значение. Например,@Output('myClick') clicks = new EventEmitter<string&
gt;(); приводит к событиям отправки под названием «myClick».
5. Обновите NgModule

Ниже приведены основные шаги, которые необходимо выполнить app.module.ts
:
- Удалить по умолчанию
bootstrap
массив, установленный наAppComponent
- Поскольку наша
ButtonComponent
не является частью любого другого компонента, а также не является корнем программы Angular, нам нужно указать Angular, чтобы он скомпилировал его специально. Для этого мы надеваем его наentryComponents
список. Иначе при встряхивании дерева Angular этот компонент будет извлечен из пакета prod. - Добавить
ngDoBootstrap()
чтобы сказать Angular использовать этот модуль для загрузки. - Angular обеспечивает
createCustomElement()
функция преобразования компонента Angular вместе с его зависимостями в пользовательский элемент. ThecreateCustomElement()
функция ожидает получить два параметра:
- Во-первых, компонент Angular, который следует использовать для создания элемента.
- Во-вторых, объект конфигурации. Этот объект должен включать свойство injector, которое установлено на текущий экземпляр Injector.
5. Следующим шагом является регистрация вновь пользовательского элемента в браузере. Это делается путем звонка customElements.define()
. Обратите внимание, что это не Angular. The customElements Свойство только для чтения относится к Окно интерфейс. Он возвращает ссылку на CustomElementRegistry объект. Этот объект можно использовать для регистрации новых пользовательских элементов. Он также может получить информацию о ранее зарегистрированных пользовательских элементах в браузере.
The customElements.define()
метод требует двух параметров:
- Первый параметр имеет тип string и содержит название элемента. Передача строки ‘кнопка программы’ означает, что пользовательский элемент
on> будет зарегистрирован и может использоваться в HTML-коде. - Вторым параметром является пользовательский элемент, созданный ранее.
6. Теперь замените target
значение в tsconfig.json
от es5
к es2015
как и в браузерах, поддерживающих специальные элементы, спецификация требует от разработчиков использовать классы ES2015 для определения пользовательских элементов.
6. Создайте и запускайте
Для постройки будем использовать стандарт ng build
команда. Но поскольку он выводит четыре файла (runtime.js
, scripts.js
, polyfills.js
и main.js
) и мы хотели бы распространить наш компонент как один файл js, нам нужно отключить хеширование имен файлов. Давайте модифицируем scripts
в package.json
и добавить package
запись:
"scripts": {
…,
"build": "ng build --prod --output-hashing=none",
// For Windows:
"package": "jscat ./dist/angular-custom-elements/runtime.js ./dist/angular-custom-elements/polyfills.js ./dist/angular-custom-elements/scripts.js ./dist/angular-custom-elements/main.js > custom-button-element.js",
// For Mac or Linux:
"package": "cat ./dist/angular-custom-elements/runtime.js ./dist/angular-custom-elements/polyfills.js ./dist/angular-custom-elements/scripts.js ./dist/angular-custom-elements/main.js > custom-button-element.js",
…,
}
Поскольку ОС Windows не имеет cat
командный запуск npm i jscat
.
Сохраните все и наконец запустите:
npm run build && npm run package
Команда генерирует custom-button-element.js
которые вы можете включить в <script>
страницы HTML, чтобы увидеть, как работает наш пользовательский элемент.
Вот пример:

Резюме
В итоге мы:
- Добавлены важные библиотеки для реализации
- Зарегистрировал компонент в CustomElementRegistry браузере
- Объединены артефакты сборки в один файл
Полный исходный код можно найти здесь.
Вы узнали что-нибудь новое? Если да, пожалуйста, хлопайте? кнопку ниже️, чтобы больше людей видели это.