Javascript Angular2自定义事件

我试图了解如何处理Angular之外的东西发出的自定义DOM事件，例如：

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

到目前为止，我已经尝试注册一个新的EventManagerPlugin，它支持以“我的”开头的所有内容。但是，如果我打印出所有“正常”事件（如“单击”和“提交”）的所有事件，则会打印出来；但我没有任何自定义事件

html:

console.log行仅打印本机事件和ng*事件，但不打印我的自定义事件：(

编辑固定解决方案 我已将（my.customEvent）移动到组件内部，日志显示了自定义事件。 通过使用EventManagerPlugin中的自定义eventHandler，可以修复将外部事件绑定到angular2内部事件，同时分离angular2内部事件的问题 相关代码

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 world中，并且可以从组件内部处理代码。

尝试扩展

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)
    );
  }
}

---

来源：

尝试扩展

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)
    );
  }
}

---

来源：

这段代码确实很旧，但我已经将其移植到RC4；不幸的是，supports方法仍然只打印本机和角度特定的事件；在这种情况下可以工作，但我不想使用真正的自定义事件。这段代码确实很旧，但我已经将其移植到RC4；不幸的是，supports方法仍然只打印本机和角度特定的事件ve和角度特定事件；在这种情况下有效，但在我的情况下不起作用；我想使用真正的自定义事件。您能提供一些重现您的问题的plunker吗？下面是示例console@yurzui：感谢您的支持；要使“支持”部分发挥作用，我唯一要做的就是将事件移到HTML的较低位置。eventlistener但不侦听dispatchEvent触发的事件。仍在讨论如何编写它，以便它侦听angular2之外的事件，但从angular2内部处理。能否提供一些重现您的问题的plunker？以下是示例请参见console@yurzui当前位置感谢您的大力支持；我要做的唯一一件事就是让“支持”部分发挥作用将事件向下移动到HTML中。但eventlistener不侦听dispatchEvent触发的事件。仍在讨论如何编写它，以便它侦听angular2之外的事件，但从angular2内部处理。

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)
    );
  }
}