TypeScript Renderer.listenGlobal方法代码示例

 ngAfterViewInit() {
     this.container = this.el.nativeElement.children[0];
     
     this.documentClickListener = this.renderer.listenGlobal('body', 'click', () => {
         this.hide();
     });
     
     this.documentRightClickListener = this.renderer.listenGlobal('body', 'contextmenu', (event) => {
         this.show(event);
         event.preventDefault();
     });
 }

 private _listenGlobal(renderer: Renderer, eventTarget: string, eventName: string,
                       unlistenId: number) {
   var unregisterCallback = renderer.listenGlobal(
       eventTarget, eventName,
       (event: any /** TODO #9100 */) => this._eventDispatcher.dispatchRenderEvent(null, eventTarget, eventName, event));
   this._renderStore.store(unregisterCallback, unlistenId);
 }

 ngAfterViewInit() {
   this._handleClick = this._renderer.listenGlobal('document', 'click', (event: Event) => {
     if (!this._hasChildMenu(event)) {
       this._closeMenu();
     }
   });
 }

	// I put the directive into a pre-drag state where we are checking to see if the 
	// depressed mouse is moved passed a certain threshold delta. It is only after the
	// delta is surpassed that we will start to emit drag events.
	private enterPreDragState() : void {

		// NOTE: In the pre-drag state, we are binding to the listeners on the global
		// target since the mouse may move outside the host element before the drag 
		// behavior is activated.

		var unbindMousemove = this.renderer.listenGlobal(
			"document",
			"mousemove",
			( event: MouseEvent ) : void => {

				var mouseDelta = Math.max(
					Math.abs( event.pageX - this.initialMouseLocation.x ),
					Math.abs( event.pageY - this.initialMouseLocation.y )
				);

				// If the mouse has moved past the threshold, teardown the state and
				// move to the drag state.
				if ( mouseDelta > 3 ) {

					unbindMousemove();
					unbindMouseup();
					this.enterDragState( event.pageX, event.pageY );

				}

			}
		);

		// If the user mouses-up in the pre-drag state, they never passed the drag 
		// threshold. As such, just teardown the state and move back to ready state.
		var unbindMouseup = this.renderer.listenGlobal(
			"document",
			"mouseup",
			( event: MouseEvent ) : void => {

				unbindMousemove();
				unbindMouseup();
				this.enterReadyState();

			}
		);

	}

	// ---
	// PRIVATE METHODS.
	// ---


	// I put the directive into a drag state where new position events are being emitted
	// as the mouse is moved around. The events indicate where the host element should 
	// be moved if the calling context is implementing the drag.
	private enterDragState( newX: number, newY: number ) : void {

		// NOTE: In the drag state, we are binding to the listeners on the global
		// target since the mouse may move outside the host element if the position of 
		// the element is not updating fast enough; or, if the calling context is NOT
		// implementing a change in position.

		var unbindMousemove = this.renderer.listenGlobal(
			"document",
			"mousemove",
			( event: MouseEvent ) : void => {

				// Try to prevent text from being highlighted by the drag action.
				event.preventDefault();

				// Get the change in mouse location.
				var deltaX = ( event.pageX - this.initialMouseLocation.x );
				var deltaY = ( event.pageY - this.initialMouseLocation.y );

				// Use the mouse delta to calculate the element's position delta.
				this.positionChange.next({
					left: ( this.initialElementPosition.left + deltaX ),
					top: ( this.initialElementPosition.top + deltaY )
				});

			}
		);

		// If the user mouses-up in the pre-drag state, they never passed the drag 
		// threshold. As such, just teardown the state and move back to ready state.
		var unbindMouseup = this.renderer.listenGlobal(
			"document",
			"mouseup",
			( event: MouseEvent ) : void => {

				unbindMousemove();
				unbindMouseup();
				this.enterReadyState();

			}
		);

	}

 ngAfterViewInit() {
     this.container = this.el.nativeElement.children[0];
     
     if(this.popup) {
         this.documentClickListener = this.renderer.listenGlobal('body', 'click', () => {
             if(!this.preventDocumentDefault) {
                 this.hide();
             }
             this.preventDocumentDefault = false;
         });
     }
 }

    public onSliderMouseDown(event: MouseEvent): void {
        console.log('onSliderMouseDown ' + this.element.nativeElement);

        this.trackWidthRange = this.getTrackWidthRange();

        this.jumpToPosition(event.clientX, this.trackWidthRange);

        this.freeMouseUpListener =
            this.renderer.listenGlobal(
                'document',
                'mouseup',
                (mouseEvent: MouseEvent) => {
                    this.onMouseUp(mouseEvent);
                });
        this.freeMouseMoveListener =
            this.renderer.listenGlobal(
                'document',
                'mousemove',
                (mouseEvent: MouseEvent) => {
                    this.onMouseMove(mouseEvent);
                });
    }

  constructor(platform: Platform, renderer: Renderer, app: IonicApp) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });

    this.app = app;

    renderer.listenGlobal('document', 'wlInitFinished', () => {
      console.log('---> wlInitFinished event received');
      this.MFPInit();
    })
  }

export function registerOutsideClick(renderer: Renderer, options: ListenOptions) {
  if (!options.outsideClick) {
    return Function.prototype;
  }

  return renderer.listenGlobal('document', 'click', (event: any) => {
    if (options.target && options.target.contains(event.target)) {
      return;
    }
    if (options.targets && options.targets.some(target => target.contains(event.target))) {
      return;
    }
    options.hide();
  });
}

 constructor(af:AngularFire, renderer: Renderer){
   this.URL = window.location.href;
   this.onOff = af.database.object('/'+this.URL.split('/game/')[1]+'/Globals/OnOff',{preserveSnapshot:true});
   this.onOff.subscribe(snapshot =>{
     this.environmentSnapshot = snapshot.val();
   });
   this.environment = af.database.object('/'+this.URL.split('/game/')[1]+'/Globals/Environment');
   this.players = af.database.object('/'+this.URL.split('/game/')[1]+'/Players',{preserveSnapshot:true});
   this.players.subscribe(snapshot =>{
     this.playersSnapshot = snapshot.val();
   });
   /* Gets keyup */
   this.getKey = renderer.listenGlobal('document', 'keyup', (event) => {
     var key = event.keyCode;
     this.toggleBtn(key);
   });
 }