Угловые элементы… наконец
Итак, ожидание, наконец, закончилось. Angular Element официально принят с выпуском Angular 6. Я знаю, что ребята из Google, работающие с полимерами, могут сжать нос, но ничего не помогут. Лично я считаю, что это одна из лучших функций, выпущенных командой Angular до сих пор, но это только я.
Прежде чем прыгать дальше, давайте уточним некоторые термины. Элементы Angular - это функция фреймворка Angular, которая позволяет вам превращать обычные компоненты Angular, которые вы используете в своем приложении Angular, в собственные веб-компоненты.
Новые нативные веб-компоненты для оповещения о словах, они являются настраиваемыми элементами и являются частью DOM Javascript API. Вы можете использовать их в приложениях, основанных на ванильном JS, или в приложениях, построенных на другой платформе, короче говоря, они не связаны с Angular.
Но прежде чем начать грызть ногти. Это все еще находится на очень ранней стадии, поэтому на данный момент элементы Angular поддерживаются только внутри приложения Angular, но в будущем их также можно будет внедрить в приложения Vanilla JS.
Пожалуйста, обратитесь к снимку экрана ниже, чтобы увидеть планы на будущее по элементам Angular из официальной документации Angular.
Итак, вы должны спросить, зачем нам нужны элементы angular, когда они, в конце концов, должны отображаться только внутри приложения Angular, ну а пока ниже приведены единственные преимущества, перечисленные в официальных документах.
- Простое динамическое содержимое в приложении Angular. Преобразование компонента в настраиваемый элемент обеспечивает простой путь к созданию динамического содержимого HTML в приложении Angular. HTML-контент, который вы добавляете непосредственно в DOM в приложении Angular, обычно отображается без обработки Angular, если вы не определяете динамический компонент, добавляя свой собственный код для подключения тега HTML к данным вашего приложения и участвуя в обнаружении изменений. С настраиваемым элементом вся эта проводка выполняется автоматически.
- Приложения с богатым контентом. Если у вас есть приложение с богатым контентом, такое как приложение Angular, в котором представлена эта документация, пользовательские элементы позволяют предоставить поставщикам контента сложные функции Angular, не требуя знания Angular. Например, руководство по Angular, подобное этому, добавляется непосредственно в DOM инструментами навигации Angular, но может включать в себя специальные элементы, такие как
<code-snippet>, которые выполняют сложные операции. Все, что вам нужно сообщить поставщику контента, - это синтаксис вашего настраиваемого элемента. Им не нужно ничего знать об Angular или о структурах данных или реализации вашего компонента.
Слишком много разговоров, правда? время кодирования
Прежде чем мы перейдем к написанию нашего первого элемента angular, нам нужно увидеть проблему в реальном времени.
Предположим, у нас есть такой компонент
и мы получаем этот компонент асинхронно с сервера, в этом случае мы не можем включить его в шаблон, поэтому мы должны передать его как контент, подобный этому
и даже если ваш app.module.ts выглядит так, он не будет отображаться.
Вы можете догадаться, почему? поскольку компонент Angular визуализируется намного раньше, он отправляется в браузер через JIT или AOT. В конечном итоге вы увидите такой экран.
Это потому, что Angular не идентифицирует его как компонент Angular. Надеюсь, вы убедились в том, что мы имеем дело с вариантом использования.
Не беспокойтесь, угловой элемент - это решение. Это позволяет нам в основном взять наш компонент Angular и поместить его в полностью инкапсулированный самозагрузочный html-элемент, который вы можете загрузить в свой Angular, чтобы он заработал.
Итак, давайте подготовим наш комплект, выполните следующие команды, чтобы получить необходимые пакеты.
npm i @angular/elements --save npm i @webcomponents/custom-elements --save
После этого перейдите в файл polyfills.ts и добавьте эти две строки
import '@webcomponents/custom-elements/custom-elements.min' import '@webcomponents/custom-elements/src/native-shim'
Это все, что вам нужно для того, чтобы элементы Angular и веб-компонент работали в вашем браузере.
Теперь измените файл app.component.ts следующим образом
Давайте рассмотрим важные изменения, которые мы внесли в этот файл для рендеринга динамических компонентов.
- Импортируйте инжектор, createCustomElement и DomSanitizer из соответствующих пакетов.
- Создайте пользовательский компонент с помощью createCustomElement из пакета @ angular / elements и передайте инжектор в качестве второго параметра
- Использование API customElements в браузере для создания настраиваемого элемента
- Очистите дом с помощью DomSanitizer
- Наконец, добавьте свой компонент в entryComponents в app.module.ts
Измените файл app.component.html таким образом, чтобы он мог принимать этот динамический веб-компонент в качестве входных данных.
<div [innerHTML]='content'> </div>
Это все, что вам нужно, чтобы превратить ваш обычный угловой компонент в веб-компонент, чтобы быть более безопасным на данный момент угловым элементом.
Если вы выполнили правильную настройку, выполнили мои шаги и у вас все нормально, вы должны увидеть компонент, отображаемый в браузере, как это.
Заключение
Это была моя щедрая попытка продемонстрировать мощь новых элементов Angular. Я надеюсь, что замечательная команда разработчиков Angular заставит его работать за пределами мира Angular, как и настоящие веб-компоненты.
Если вы хотите увидеть полный код, просьба клонировать здесь.