TypeScript Renderer2.listen方法代码示例

    public ngOnChanges(changes: { targetElement?: SimpleChange }): void {
        if (this.scrollListener) {
            this.scrollListener();
        }
        if (changes.targetElement && changes.targetElement.currentValue) {
            this.scrollListener = this.renderer.listen(this.targetElement, 'scroll', () => {
                if (this.list.busy || false === this.bufferedPager.canLoadMore) {
                    return;
                }

                const targetTop = this.targetElement.getBoundingClientRect().top;
                const targetHeight = this.targetElement.clientHeight;
                const elementPosition = (this.elementRef.nativeElement as HTMLElement).getBoundingClientRect().top;
                if (targetTop + targetHeight >= elementPosition) {
                    this.list.loadData();
                }
            });
        } else {
            this.scrollListener = this.renderer.listen('window', 'scroll', () => {
                if (this.list.busy || false === this.bufferedPager.canLoadMore) {
                    return;
                }
                const windowHeight = document.documentElement.clientHeight;
                const elementPosition = (this.elementRef.nativeElement as HTMLElement).getBoundingClientRect().top;
                if (elementPosition - windowHeight <= 0) {
                    this.list.loadData();
                }
            });
        }
    }

  parsedTriggers.forEach((trigger: Trigger) => {
    if (trigger.open === trigger.close) {
      listeners.push(renderer.listen(target, trigger.open, toggleFn));

      return;
    }

    listeners.push(
      renderer.listen(target, trigger.open, showFn),
      renderer.listen(target, trigger.close, hideFn)
    );
  });

 /**
  * Attaches scroll listener to given dom element
  *
  * @param element
  * @param callback
  */
 attachScrollListener(element: any, callback: (event: Event) => void): () => void {
   return this.renderer.listen(
     element,
     'scroll',
     callback.bind(this)
   );
 }

    public open():void {
        // Attach the generated component to the current application.
        this._componentFactory.attachToApplication(this._componentRef);

        if (this.popup.config.isInline) {
            this._componentFactory.moveToElement(this._componentRef, this._element.nativeElement.parentElement);
        } else {
            // Move the generated element to the body to avoid any positioning issues.
            this._componentFactory.moveToDocumentBody(this._componentRef);
        }

        // Attach a reference to the anchor element. We do it here because IE11 loves to complain.
        this.popup.anchor = this._element;

        // Add a listener to the document body to handle closing.
        this._documentListener = this._renderer
            .listen("document", "click", (e:MouseEvent) =>
                this.onDocumentClick(e));

        // Start popup open transition.
        this.popup.open();

        // Call lifecyle hook
        const lifecycle = (this as IPopupLifecycle).popupOnOpen;
        if (lifecycle) {
            lifecycle.call(this);
        }
    }

    ngOnInit(): void {
        let classes = this.inputElement.className;

        this.inputElement.setAttribute('type', 'checkbox');

        this.wrapper = document.createElement('span');
        this.wrapper.className = classes + ' form-switch';

        if (this.inputElement.name) {
            this.wrapper.className += ' form-switch-' + this.inputElement.name;
        }

        this.inputElement.parentElement.insertBefore(this.wrapper, this.inputElement);
        this.wrapper.appendChild(this.inputElement);

        this.control = document.createElement('i');
        this.control.className = 'control';
        this.wrapper.appendChild(this.control);

        let clickHandler;
        if (this.wrapper.parentElement.tagName.toLowerCase() == 'label') {
            clickHandler = this.wrapper.parentElement;
        } else {
            clickHandler = this.wrapper;
        }

        this.renderer.listen(clickHandler, 'click', e => this.click(e));

        setTimeout(() => {
            if (this.model.model) {
                this.wrapper.classList.add('on');
            }
        }, 50);
    }

  private listen(r: Renderer2, el: any, elName: string, eventName: string, unlistenId: number) {
    const listener = (event: any) => {
      return this._eventDispatcher.dispatchRenderEvent(el, elName, eventName, event);
    };

    const unlisten = r.listen(el || elName, eventName, listener);
    this._renderStore.store(unlisten, unlistenId);
  }

	constructor(private elRef: ElementRef, private renderer: Renderer2) {

		renderer.listen(elRef.nativeElement, 'touchmove', (e) => {
			e.preventDefault();
			e.stopPropagation();
			e.returnValue = false;
		});
	}

 ngOnInit() {
     if (this.elementRef.nativeElement) {
         this.renderer.listen(this.elementRef.nativeElement, 'click', (evt) => {
             evt.preventDefault();
             this.logout();
         });
     }
 }

  parsedTriggers.forEach((trigger: Trigger) => {
    const useToggle = trigger.open === trigger.close;
    const showFn = useToggle ? options.toggle : options.show;

    if (!useToggle) {
      _registerHide.push(() =>
        renderer.listen(target, trigger.close, options.hide)
      );
    }

    listeners.push(
      renderer.listen(target, trigger.open, () => showFn(registerHide))
    );
  });

 ngAfterContentInit() {
   if (this.header) {
     this.renderer.listen(this.header.nativeElement, 'click', () => {
       // console.log(this.header);
       this.isOpen = !this.isOpen;
       // this.renderer.setStyle(
       //   this.group.nativeElement,
       //   'display',
       //   this.isOpen ? 'none' : 'block'
       // );
       this.isOpen &&
         this.renderer.addClass(this.group.nativeElement, 'active');
       !this.isOpen &&
         this.renderer.removeClass(this.group.nativeElement, 'active');
     });
   }
 }

 ngOnInit(): void {
   // save old overflow
   if (this.lockScroll) {
     this.cacheOverflow = this.window.getComputedStyle(this.document.body).overflow
   }
   this.cacheModalElement = this.renderer.createElement('div')
   this.renderer.setAttribute(this.cacheModalElement, 'class', 'v-modal')
   this.renderer.setStyle(this.cacheModalElement, 'z-index', this.modalZindex)
   this.renderer.setStyle(this.cacheModalElement, 'display', this.visible ? 'block' : 'none')
   this.document.body.appendChild(this.cacheModalElement)
   // listen esc
   if (this.closeOnPressEscape) {
     this.globalListenFunc = this.renderer.listen(
     'document', 'keydown', (event: KeyboardEvent) => {
       this.visible && event.keyCode === 27 && this.closeHandler()
     })
   }
 }

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

  return renderer.listen('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();
  });
}

 ngAfterViewInit() {
     this.renderer.listen(this.el.nativeElement, "click", () => this.onDropdownItemClick());
 }

    constructor(renderer:Renderer2, viewType:CalendarViewType, ranges:CalendarRangeService) {
        this._type = viewType;
        this.ranges = ranges;

        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:KeyboardEvent) => this.onDocumentKeyDown(e));
    }

 document.querySelectorAll('a').forEach(a => {
   this.renderer.listen(a, 'click', this.collapseHide);
 });