首页 > 代码库 > [Angular] Angular Global Keyboard Handling With EventManager

[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();  }}

 

[Angular] Angular Global Keyboard Handling With EventManager