angular指令——判斷鼠標是否在dom內

用過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);
}