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;