Также известный как: преобразование кода ES5 Бена Надела в TypeScript

Вся заслуга за 4 часа, которые я посвятил этому исследованию, принадлежит Бену Наделу и его недавно опубликованной статье Создание пользовательских привязок событий DOM и хоста в Angular 2 Beta 6.

Я был достаточно сумасшедшим, чтобы стать первым человеком, который попытался преобразовать эту статью о ES5 и «перенести» ее обратно в TypeScript, чтобы люди могли лучше понять, как, черт возьми, он создал эти крутые пользовательские события.

Вы можете найти рабочий пример этого кода в моем репозитории Angular2-Webpack-Lite в моей ветке« эксперимент .»

В стиле tl; dr я хотел нарисовать картину варианта использования для настраиваемого события следующим образом:

Вы создаете модальное окно, которое будет использовать пользователь, и хотите вызывать функцию `closeModal ()`, когда пользователь щелкает за пределами модального элемента.

Чтобы сделать что-то подобное, вы можете расширить функциональность EventManagerPlugin.

Выполняя небольшой поисковый запрос, я нашел еще один класс, который уже расширяет EventManagerPlugin, под названием DomEventsPlugin, который уже использовал абстрагированный токен DOM для безопасности платформы. (IE Webworkers, серверы и т. Д.)

DomEventsPlugin решил стать более простым для расширения классом, поскольку вся дополнительная работа по расширению EventManagerPlugin уже была сделана.

Я не совсем понимал, в чем разница между addEventListener () и addGlobalEventLisenter (), пока не начал разбираться с ним. Я обнаружил:

addEventListener:

Срабатывает, когда вы используете события из DOM:

@Component({
  template: `<div (click)=”doSomething”></div>`
})
export class SomeComponent {
  doSomething() {
  }
}

addGlobalEventListener:

Срабатывает, когда вы используете события из любого места (включая видимые здесь, на вкладке хостов.

@Component({
  host:{"(click)":"doSomething()"},
  template: `<div></div>`
})
export class SomeComponent {
  doSomething() {}
}

Итак, как написала муза автора Бен Надел, нам необходимо иметь eventMap, который позволит нам прослушивать исходное событие, при этом предоставляя настраиваемое событие. название.

Angular2 определяет, что событие допустимо, когда одно из расширений EventManagerPlugin в EVENT_MANAGER_PLUGINS возвращает true для требуемого supports () функцию:

Наконец, я реализовал функции addEventListener () и addGlobalEventListener ():

К счастью, благодаря DomEventsPlugin, большая часть этого кода была копипастом. Я внес несколько изменений:

  • Для addEventListener () используйте делегирование события вместо прямой привязки к событию (с помощью DOM.getGlobalEventTarget (‘document’)). Это позволило мне вернуть ссылку на документ и привязать ее к событию.
  • Затем я предотвращаю возникновение события щелчка, если выбранный элемент совпадает с элементом, к которому он привязан.
  • Чтобы DOM не был нулевым при запуске моего кода, мне пришлось вытащить его из 'angular2 / src / platform / dom / dom_adapter' вместо 'angular2 / platform / common_dom '. По какой-то причине TypeScript нарушает DOM, каким-то образом делая его нулевым.

Наконец-то! (tl; dr / покажи мне код черт возьми):

В заключение, это окончательный результат, с которым я вернулся:

Использование:

Чтобы включить это в EVENT_MANAGER_PLUGINS, вам необходимо использовать provide ():

Затем вы импортируете эти константы в свой вызов bootstrap ():

Заключение:

Если Бен Надел продолжит выкачивать то, чего никто раньше не делал с Angular2 в ES5, то вы будете постоянно видеть, как я публикую об этом статьи. Ладно, может, в любом случае я просто напишу статьи об Angular2.

Спасибо, что прочитали, и не стесняйтесь, ловите меня на Github / Twitter @TheLarkInn.

Для получения дополнительной информации о зонах и о том, почему мы используем их при инициировании этих событий, вы можете обратиться к статье, указанной в верхней части страницы.