码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular] Angular Global Keyboard Handling With EventManager

时间:2017-07-02 19:43:55      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:manage   span   variables   dev   ati   ons   for   handler   scss   

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

标签:manage   span   variables   dev   ati   ons   for   handler   scss   

原文地址:http://www.cnblogs.com/Answer1215/p/7106848.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!