当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript EventManager.getZone方法代码示例

本文整理汇总了TypeScript中@angular/platform-browser.EventManager.getZone方法的典型用法代码示例。如果您正苦于以下问题:TypeScript EventManager.getZone方法的具体用法?TypeScript EventManager.getZone怎么用?TypeScript EventManager.getZone使用的例子?那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在@angular/platform-browser.EventManager的用法示例。


在下文中一共展示了EventManager.getZone方法的6个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: addGlobalEventListener

  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);
    });
  }
开发者ID:lucienimmink,项目名称:JSMusicDBNext,代码行数:8,代码来源:media-events.ts

示例2: addEventListener

 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);
             };
         });
 }
开发者ID:Zarysiek,项目名称:a2ui,代码行数:13,代码来源:bootstrap_events.ts

示例3: addEventListener

  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);
  }
开发者ID:lucienimmink,项目名称:JSMusicDBNext,代码行数:15,代码来源:media-events.ts

示例4: addEventListener

    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();
        });
    }
开发者ID:CaselIT,项目名称:angular2-modal,代码行数:34,代码来源:outside-event-plugin.ts

示例5: setupEventBinding

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

		}

	}
开发者ID:bennadel,项目名称:JavaScript-Demos,代码行数:37,代码来源:dom-no-change-detection.plugin.ts

示例6: addEventListener

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

				}
			);

		}

	}
开发者ID:bennadel,项目名称:JavaScript-Demos,代码行数:69,代码来源:direct-click.plugin.ts


注:本文中的@angular/platform-browser.EventManager.getZone方法示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。