Будущее веб-разработки
(мое скромное мнение)
Представьте себе приложение, полностью построенное с веб-компонентами, возможности безграничны и есть еще больше преимуществ (бесконечность * 2).
некоторые из основных преимуществ:
- Возможность многократного использования. Один и тот же веб-компонент может использоваться во всех приложениях.
- Совместимость. , поскольку веб-компоненты представляют собой просто теги HTML с инкапсулированными функциями js, их можно использовать везде (Angular, React, Vue и т. д.)
- Тестируемость. веб-компоненты - это отдельный фрагмент кода, который можно легко тестировать с помощью Jest, Karma и любой другой среды модульного тестирования для Интернета.
С новым выпуском Angular 6 создание веб-компонентов никогда не было таким простым, и в этой статье я хотел бы показать несколько вещей, которые я обнаружил об элементах Angular, которые мне пришлось выяснить самостоятельно, а не о том, как создать Угловой элемент, потому что по этому поводу уже есть много хороших руководств и репозиториев.
Один из моих любимых - https://github.com/beeman/angular-elements-chat-widget
Наш элемент
В этой статье я назову элемент <my-avatar-element id="avatarEl"></my-avatar-element>
.
Отображение свойства элемента
@Input('avatar-url') public avatarUrl: string;
таким образом мы можем передать атрибут avatar-url (обратите внимание на используемый дефис, вы не можете передавать атрибуты в элементы html заглавными буквами) следующим образом: <my-avatar-element avatar-url="some url for your avatar"></my-avatar-element>
, а также выбирая наш настраиваемый элемент с помощью
const avatarEl = document.getElementById('avatarEl'); avatarEl.avatarUrl = "some url for the avatar";
Отображение события из элемента
@Output() public avatarChange: EventEmitter<any> = new EventEmitter();
таким образом мы можем прослушивать события из настраиваемого элемента следующим образом
const avatarEl = document.getElementById('avatarEl'); avatarEl.addEventListener('avatarChange', (evt) => { do you thing here });
Отображение метода для элемента (это то, что мне было трудно решить почти самостоятельно)
@HostBinding('toggle') public toggle = function() { // do you thing here }
Таким образом, мы можем использовать метод для самого элемента, которым мы управляем, мы можем передавать переменные в эту функцию, и она также может передавать изменения пользователю элемента.
const avatarEl = document.getElementById('avatarEl'); avatarEl.toggle(); // will run the function
имейте в виду, что при использовании этого для предоставления атрибутов / методов вы должны объявить в пользовательском элементе .module.ts
, что вы используете CUSTOM_ELEMENTS_SCHEMA
.
Будущее Angular Elements
После участия в #AngularUP в Израиле и того, что Роб Вормолд рассказывает о том, что нас ждет в ближайшем будущем, я очень взволнован этой удивительной функцией Angular, и это будущее уже не за горами.
так как есть еще несколько проблем и ошибок, которые решает команда angular, таких как дублирование ZoneJS и дублирование настраиваемого элемента при использовании элемента Angular внутри проекта angular, над которым я работал с помощью следующего скрипта
// check if zoneJS already exist (inside an angular project), if not load it from a CDN if (!window['Zone']) { const zone = document.createElement('script'); zone.src = 'https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.20/zone.min.js';document.body.appendChild(zone); zone.onload = () => bootstrapApp(); zone.onerror = (err) => console.error(err); } else { bootstrapApp(); } import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { ElementModule } from './app/element.module'; function bootstrapApp() { // check if already bootstraping the element to avoid duplications if (window['isBootstrapingBot']) { return; } else { window['isBootstrapingBot'] = true; } platformBrowserDynamic().bootstrapModule(ElementModule).catch(err => console.log(err));}
Надеюсь, вам всем понравится читать, буду признателен за отзывы. спасибо и удачного взлома;)