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