ngx自定义一个判断是否点击本节点的指令

大佬教程收集整理的这篇文章主要介绍了ngx自定义一个判断是否点击本节点的指令，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

写组件的时候经常要判断鼠标点击是否是本节点 所以 抽出来

废话少说直接上代码

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)="关闭函数()">

大佬总结

以上是大佬教程为你收集整理的ngx自定义一个判断是否点击本节点的指令全部内容，希望文章能够帮你解决ngx自定义一个判断是否点击本节点的指令所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。