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