[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的更多相关文章
- [转]Global exception handling in Web API 2.1 and NLog
本文转自:https://stackoverflow.com/questions/25865610/global-exception-handling-in-web-api-2-1-and-nlog ...
- [Angular] Observable.catch error handling in Angular
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/opera ...
- Angular - - angular.Module
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- Angular - - angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- Angular - - Angular数据类型判断
angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...
- Angular - - angular.uppercase、angular.lowercase、angular.fromJson、angular.toJson
angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = &quo ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- Angular - - angular.element
angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...
- Angular - - angular.equals
angular.equals 对比两个对象/值是否相等.支持值类型.正则表达式.数组和对象. 如果下列至少有一个是正确的,则将两个对象/值视为相等. 两个对象/值能通过===比较. 两个对象/值是同一 ...
随机推荐
- 类数组对象arguments 和 数组对象
arguments并不是一个真正的数组,而是一个“类似数组(array-like)”的对象: 就像下面的这段输出,就是典型的类数组对象: {0:12, 1:23} 一.类数组 VS 数组 相同点: 都 ...
- 43.可变参数实现printf
#include <stdio.h> #include <stdio.h> #include <Windows.h> #include <stdarg.h&g ...
- 英语 用on还是/at/还是in
in prep. 1. [表示地点.场所.位置等]在…里面:在…内部:在…上:例句: in the room 在房间里 2. [表示时间]在…期间:在(一段时间)以内:过…之久:例句: in su ...
- ip---查看网络信息
Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者. ifconfig属于net-tools.ip属于iproute2 设置一个IP地址,可以使用下列ip命令: ip add ...
- at&&atq&&atrm---定时任务
at放在 ls /var/spool/at/ 目录下 At的配置文件/etc/at.deny和/etc/at.allow 如果deny单独存在,则是deny以为的所有用户都可以使用at命令 如果all ...
- 洛谷——P1307 数字反转
https://www.luogu.org/problem/show?pid=1307#sub 题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原 ...
- 联合体union用在何处?
程序设计刚開始学习的人在学习时,总想问:"这个东东有什么用?"于是,在建设有关的教学资源时,也便总从这个角度,试图给出一些案例,这是一个将刚開始学习的人作为教学目标人群的人该干的事 ...
- HBase-scan API 通过scan读取表中数据
直接贴代码啦 /** * * @param zkIp * @param zkPort * @param tablename * @param startRow 传null扫全表 * @param st ...
- pdnsd 解析原理
apt install dnsmasq dnsmasq-fullvim /etc/dnsmasq.conf vim /etc/pdnsd.conf killall pdnsdpdnsd -c /etc ...
- ELK之日志查询、收集与分析系统
项目由来 (1)开发人员不能登录线上服务器查看详细日志,经过运维周转费时费力 (2)日志数据分散在多个系统,难以查找与整合 (3)日志数据量巨大,查询速度太慢,无法满足需求 (4)无法全局掌控项目运行 ...