от 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:

1. Удалить по умолчанию bootstrap массив, установленный на AppComponent
2. Поскольку наша ButtonComponent не является частью любого другого компонента, а также не является корнем программы Angular, нам нужно указать Angular, чтобы он скомпилировал его специально. Для этого мы надеваем его на entryComponents список. Иначе при встряхивании дерева Angular этот компонент будет извлечен из пакета prod.
3. Добавить ngDoBootstrap() чтобы сказать Angular использовать этот модуль для загрузки.
4. Angular обеспечивает createCustomElement() функция преобразования компонента Angular вместе с его зависимостями в пользовательский элемент. The createCustomElement() функция ожидает получить два параметра:

• Во-первых, компонент 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 браузере
• Объединены артефакты сборки в один файл

Полный исходный код можно найти здесь.

Вы узнали что-нибудь новое? Если да, пожалуйста, хлопайте? кнопку ниже️, чтобы больше людей видели это.

Похожие записи:

1. Семантические кнопки пользовательского интерфейса