Angular2自定义事件

Angular2 Custom Events

本文关键字：事件 自定义 Angular2      更新时间：2023-09-26

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

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

到目前为止，我已经尝试注册了一个新的EventManagerPlugin，它支持以"my"开头的所有内容但如果我打印出所有"正常"事件（如"点击"answers"提交"）所产生的事件，则会打印出；但没有我的定制活动。

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行只打印本机事件和ng*事件，而不打印我的自定义事件：（

EDIT固定解决方案我已经在组件中移动了（my.customEvent），日志显示了自定义事件。将外部事件绑定到angular2内部事件，同时分离2是通过在EventManagerPlugin中使用自定义事件处理程序修复的重新激活代码

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世界中，并且可以在组件内处理代码。

尝试扩展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/创建自定义事件-in-angular2-f326d348dc8b#.so0jvssnz

相关文章：