博客

用过angular material中的

dialog

组件的，都知道，默认情况下，你点击非弹窗的区域，弹窗会自动关闭。如果不需要自动关闭，可以用

disableClose:true

来进行限制。

而我们在写自定义组件的时候，也常常会遇到，打开一个dom后，希望点击空白，这个dom就隐藏不显示。这个时候，就需要我们自己写一个指令，来对鼠标事件做一个判断。

1.创建一个clickOutsideClose.directive.ts文件，在文件里，我们规定，clickOutside可以作为标签的属性被识别：

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            // console.log('outside');
            this.clickOutside.emit(event);
        }
    }
}

2.在需要的地方，使用该属性型指令：

<div clickOutside (clickOutside)="emitData(ev)">这里是内容区域，put any content you want</div>

3.传出鼠标状态，并自定义后续操作：

emitData(ev){
	//the mouse pointer is outside, continue here
	console.log(ev);
}