检测 Angular 组件外部的点击

Question

如何在 Angular 中检测组件 外部 的点击？

原文由 AMagyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

import { Component, ElementRef, HostListener, Input } from '@angular/core';

@Component({
  selector: 'selector',
  template: `
    <div>
      {{text}}
    </div>
  `
})
export class AnotherComponent {
  public text: String;

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.text = "clicked inside";
    } else {
      this.text = "clicked outside";
    }
  }

  constructor(private eRef: ElementRef) {
    this.text = 'no clicks yet';
  }
}

一个工作示例 - 点击这里

原文由 AMagyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

解决方案

让所有的父母

var paths       = event['path'] as Array<any>;

检查是否有任何父组件是组件

var inComponent = false;
paths.forEach(path => {
    if (path.tagName != undefined) {
        var tagName = path.tagName.toString().toLowerCase();
        if (tagName == 'app-component')
            inComponent = true;
    }
});

如果您将组件作为父组件，请在组件内部单击

if (inComponent) {
    console.log('clicked inside');
}else{
    console.log('clicked outside');
}

完整方法

@HostListener('document:click', ['$event'])
clickout(event: PointerEvent) {

    var paths       = event['path'] as Array<any>;

    var inComponent = false;
    paths.forEach(path => {
        if (path.tagName != undefined) {
            var tagName = path.tagName.toString().toLowerCase();
            if (tagName == 'app-component')
                inComponent = true;
        }
    });

    if (inComponent) {
        console.log('clicked inside');
    }else{
        console.log('clicked outside');
    }

}

原文由 Wictor Chaves 发布，翻译遵循 CC BY-SA 4.0 许可协议