Clickoutside指令

[alanhe421]

场景

当我们展开某个弹出层，我们点击弹出层外部任意位置，实现弹出层关闭，如何实现呢，一个指令即可搞定。

click-outside.directive.ts

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

/**
 * Created by He on 25/12/17.
 * 点击挂载对象的外部节点，触发事件
 */
@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter();

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }
}