TypeScript EventManager.getZone方法代碼示例

  public addGlobalEventListener(target: string, eventName: string, handler): any {
    const zone = this.manager.getZone();
    const outsideHandler = (event: any) => zone.run(() => handler(event));

    return this.manager.getZone().runOutsideAngular(() => {
      this.manager.addGlobalEventListener(target, eventName, outsideHandler);
    });
  }

 addEventListener (element: HTMLElement, eventName: string, handler: Function): Function {
     let zone: NgZone = this.manager.getZone();
     let outsideHandler: any = (event: any) => {
         zone.runGuarded(() => handler(event));
     };
     return this.manager.getZone().runOutsideAngular(
         () => {
             $(element).on(eventName, outsideHandler);
             return () => {
                 $(element).off(eventName, outsideHandler);
             };
         });
 }

  public addEventListener(element: HTMLElement, eventName: string, handler): any {
    const zone = this.manager.getZone();

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

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

    return this.manager.getZone().runOutsideAngular(addAndRemoveHostListenersForOutsideEvents);
  }

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

        // A Factory that registers the event on the document, instead of the element.
        // the handler is created at runtime, and it acts as a propagation/bubble predicate, it will
        // bubble up the event (i.e: execute our original event handler) only if the event targer
        // is an ancestor of our element.
        // The event is fired inside the angular zone so change detection can kick into action.
        const onceOnOutside = () => {
            const listener =
              bubbleNonAncestorHandlerFactory(element, evt => zone.runGuarded(() => handler(evt)));

            // mimic BrowserDomAdapter.onAndCancel
            document.addEventListener(eventMap[eventName], listener, false);
            return () => document.removeEventListener(eventMap[eventName], listener, false);
        };

        // we run the event registration for the document in a different zone, this will make sure
        // change detection is off.
        // It turns out that if a component that use DOMOutsideEventPlugin is built from a click
        // event, we might get here before the event reached the document, causing a quick false
        // positive handling (when stopPropagation() was'nt invoked). To workaround this we wait
        // for the next vm turn and register.
        // Event registration returns a dispose function for that event, angular use it to clean
        // up after component get's destroyed. Since we need to return a dispose function
        // synchronously we have to put a wrapper for it since we will get it asynchronously,
        // i.e: after we need to return it.
        //
        return zone.runOutsideAngular(() => {
            let fn: Function;
            setTimeout(() => fn = onceOnOutside(), 0);
            return () => fn();
        });
    }

	// I bind the given event handler to the given event target. I can be used for both
	// local and global targets. Returns a function that tears-down the event binding.
	private setupEventBinding(
		target: EventTarget,
		eventName: string,
		handler: Function
		) : Function {

		// In order to bypass the change-detection system, we're going to bind the DOM
		// event handler outside of the Angular Zone. The calling context can always
		// choose to re-enter the Angular zone if it needs to (such as when synthesizing
		// an event).
		this.manager.getZone().runOutsideAngular( addProxyFunction );

		return( removeProxyFunction );

		// -- Hoisted Functions -- //

		function addProxyFunction() {

			target.addEventListener( eventName, proxyFunction, false );

		}

		function removeProxyFunction() {

			target.removeEventListener( eventName, proxyFunction, false );

		}

		function proxyFunction( event: Event ) {

			handler( event );

		}

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I bind the "directclick" event to the given object.
	public addEventListener(
		element: HTMLElement,
		eventName: string,
		handler: Function
		) : Function {

		// By default, when we bind an event using the .addEventListener(), the event is
		// bound inside Angular's Zone. This means that when the event handler is 
		//invoked, Angular's change-detection algorithm will get automatically triggered.
		// When there is a one-to-one mapping of events to event handler calls, this 
		// makes sense. However, in this case, for the "directclick" event, not all 
		// "click" events will lead to an event handler invocation. As such, we want to 
		// bind the base "click" hander OUTSIDE OF THE ANGULAR ZONE, inspect the event, 
		// then RE-ENTER THE ANGULAR ZONE only in the case when we're about to invoke the
		// event handler. This way, the "click" events WILL NOT trigger change-detection;
		// but, the "directclick" events WILL TRIGGER change-detection.
		var zone: NgZone = this.manager.getZone();

		zone.runOutsideAngular( addClickHandler );

		return( removeClickHandler );

		// ---
		// LOCALLY-SCOPED FUNCTIONS.
		// ---

		// I handle the base "click" event OUTSIDE the Angular Zone.
		function addClickHandler() {

			element.addEventListener( "click", clickHandler, false );

		}

		// I remove the base "click" event.
		function removeClickHandler() {

			element.removeEventListener( "click", clickHandler, false );

		}

		// I handle the base "click" event.
		function clickHandler( event: Event ) : void {

			if ( event.target !== element ) {

				return;

			}

			// If the target of the click event is the bound element, then this "click"
			// event is a "directclick" event. At this point, we need to invoke the 
			// event-handler. So, we're going to RE-ENTER THE ANGULAR ZONE so that the
			// change-detection algorithm will be triggered.
			zone.run(
				function runInZoneSoChangeDetectionWillBeTriggered() {

					handler( event );

				}
			);

		}

	}