javascript - Angular2 自定义事件

Question

我正在尝试找出如何处理 Angular 之外的事件发出的自定义 DOM 事件，例如以下内容:

document.querySelector('my-custom-element').dispatchEvent(new Event('my.customEvent'));

到目前为止，我已经尝试注册一个新的 EventManagerPlugin，它支持以“my”开头的所有内容。但是如果我打印出所有“正常”事件(如“点击”和“提交”)所产生的所有事件；但没有我的自定义事件。

html:

<my-custom-element (my.customEvent)="handleCustomEvent($event)"></my-custom-element>

ts:

supports(eventName: string):boolean {
    var ret = false;
    if (eventName.indexOf('my.') === 0) {
        ret = true;
    }
    console.log('supports event?', eventName, ret);
    return ret;
}

console.log 行仅打印 native 事件和 ng*events，但不打印我的自定义事件:(

编辑固定解决方案 我已将 (my.customEvent) 移至组件内，并且日志显示了自定义事件。 通过在 EventManagerPlugin 中使用自定义事件处理程序来修复将外部事件绑定(bind)到 Angular2 内部事件并分离 2 的问题 相关代码

addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    let zone = this.manager.getZone();

    // Entering back into angular to trigger changeDetection
    var outsideHandler = (event: any) => {
        zone.run(() => handler(event));
    };

    // Executed outside of angular so that change detection is not constantly triggered.
    var addAndRemoveHostListenersForOutsideEvents = () => {
        this.manager.addEventListener(element, 'external.' + eventName, outsideHandler);
    }
    return this.manager.getZone().runOutsideAngular(addAndRemoveHostListenersForOutsideEvents);
}

通过 DOM 触发事件:

document.querySelector('my-custom-element').dispatchEvent(new Event('external.my.customEvent'));

现在您可以从 DOM 触发一个事件，该事件被推送到 angular2 世界中，并且可以从组件内部处理代码。

Answer 1

尝试扩展DomEventsPlugin，例如:

import {DomEventsPlugin} from 'angular2/platform/common_dom';
// Have to pull DOM from src because platform/common_dom returns DOM as null.
// I believe its a TS bug.
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {Injectable} from 'angular2/core';
import {noop} from 'angular2/src/facade/lang';

@Injectable()
export class DOMOutsideEventPlugin extends DomEventsPlugin {
  eventMap: Object = {
    "clickOutside": "click",
    "mousedownOutside": "mousedown",
    "mouseupOutside": "mouseup",
    "mousemoveOutside": "mousemove"
  }
  supports(eventName: string): boolean {
    return this.eventMap.hasOwnProperty(eventName);
  }

  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    var zone = this.manager.getZone();
    var documentEvent = this.eventMap[eventName];

    // Entering back into angular to trigger changeDetection 
    var outsideHandler = (event) => {
        zone.run(() => handler(event))
    };

    // Executed outside of angular so that change detection is not constantly triggered.
    var addAndRemoveHostListenersForOutsideEvents = () => {
      DOM.onAndCancel(DOM.getGlobalEventTarget('document'), documentEvent,
        (event) => {
          let current = event.target;
          // if the element/event is propagating from the element its bound to, don't handle it.
          if (current.parentNode && current !== element) {
              outsideHandler(event);
        }
      });
    }
    return this.manager.getZone().runOutsideAngular(addAndRemoveHostListenersForOutsideEvents);
  }

  addGlobalEventListener(target: string, eventName: string, handler: Function): Function {
    var element = DOM.getGlobalEventTarget(target);
    var zone = this.manager.getZone();
    var outsideHandler = (event) => zone.run(() => handler(event));

    if ((target === "document") || (target === "window" )) {
      return noop;
    }
    return this.manager.getZone().runOutsideAngular(
        () => DOM.onAndCancel(element, eventName, outsideHandler)
    );
  }
}

来源:https://medium.com/@TheLarkInn/creating-custom-dom-events-in-angular2-f326d348dc8b#.so0jvssnz