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();
      }
    
    }
  • 相关阅读:
    idea中svn代码冲突
    数据库表的连接(Left join , Right Join, Inner Join)用法详解
    @Param注解的用法解析
    spring @Transactional注解参数详解
    数据库的DDL、DML和DCL的区别与理解
    Mybatis:resultMap的使用总结
    Maps.newHashMap 和 new HashMap的区别
    php 个推的例子
    fidder 调接口 的 小常识
    php Memcached
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7106848.html
Copyright © 2011-2022 走看看