写组件的时候经常要判断鼠标点击是否是本节点 所以 抽出来
废话少说直接上代码
import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
/**
* 是否点击的是本节点
* 如果点击的不是本节点或者按Esc 发射一个事件
* @export
* @class ClickOutsideDirective
* @implements {OnInit}
* @implements {OnDestroy}
*/
@Directive({
selector: '[clickOutside]',
})
export class ClickOutsideDirective implements OnInit, OnDestroy {
constructor(private element: ElementRef) {
}
// Output 装饰器支持一个可选的参数,用来指定组件绑定属性的名称。如果没有指定,则默认使用 @Output 装饰器,装饰的属性名。具体示例如下:
@Output('clickOutside') onClickOutside: EventEmitter<void> = new EventEmitter<void>();
escKeyListener = (event: KeyboardEvent) => {
// Esc的keyCode为27
if (event.keyCode === 27) {
this.onClickOutside.emit();
}
}
clickListener = (event: Event) => {
/**
* 兼容IE的写法
* IE下,event对象有srcElement属性,但是没有target属性;
* Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
*/
if (!isSelfOrAncestorNode(this.element.nativeElement, event.target as Node || event.srcElement)) {
this.onClickOutside.emit();
}
}
ngOnInit(): void {
// 初始化监控鼠标弹起和键盘弹起
document.addEventListener('mouseup', this.clickListener);
document.addEventListener('keyup', this.escKeyListener);
}
ngOnDestroy(): void {
// 指令销毁时销毁监控 释放内存
document.removeEventListener('mouseup', this.clickListener);
document.removeEventListener('keyup', this.escKeyListener);
}
}
// 是否是自己或者父级的DOM节点
function isSelfOrAncestorNode(ancestor: Node, node: Node): boolean {
while (node) {
if (node === ancestor) {
return true;
}
node = node.parentNode;
}
return false;
}
用的时候直接在组件最外层
<div (clickOutside)="关闭函数()">