zoukankan      html  css  js  c++  java
  • [Angular] Angular Global Keyboard Handling With EventManager

    If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'.

    Now we have a modal component, we want to click 'Esc' key to close the modal.

      <au-modal
        class="auth-modal"
        *auModalOpenOnClick="[loginButton, signUpButton]"
        [closeOnClickOutside]="true"
        [closeOnEsc]="true"
        [body]="newModelBody">
        <!-- Modal body -->
      </au-modal>

    We set two input variables: 'closeOnEsc' for keyboard event. And 'closeOnClickOutside' to click event.

    import {Component, Input, OnInit, TemplateRef} from '@angular/core';
    import {AuModalService} from './au-modal.service';
    import {EventManager} from '@angular/platform-browser';
    
    @Component({
      selector: 'au-modal',
      templateUrl: './au-modal.component.html',
      styleUrls: ['./au-modal.component.scss']
    })
    export class AuModalComponent implements OnInit {
    
      @Input() body: TemplateRef<any>;
      @Input() closeOnClickOutside = true;
      @Input() closeOnEsc = true;
    
      constructor(private auModelService: AuModalService,
                  private eventManage: EventManager) {
      }
    
      ngOnInit() {
        this.eventManage.addGlobalEventListener('window', 'keyup.esc', () => {
          if (this.closeOnEsc) {
            this.closeModal();
          }
        })
      }
    
      onClick() {
        if (this.closeOnClickOutside) {
          this.closeModal();
        }
      }
    
      closeModal() {
        this.auModelService.close();
      }
    
      cancelCloseModal(evt: KeyboardEvent) {
        evt.preventDefault();
        evt.stopPropagation();
      }
    
    }
  • 相关阅读:
    GateWay程序分析02_IAP_FLASH.H
    GateWay程序分析05_WDT.h
    GateWay程序分析03_timer.h
    GateWay程序分析_主函数_02整体流程
    网关系统软件设计_系统需求分析v1
    [收藏]DIV中图片居中
    CSS HACK 手记
    一道题“谁养鱼”的穷举解法。
    简单好用的联动下拉控件(修正)
    权限认证的WEB页面实施
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7106848.html
Copyright © 2011-2022 走看看