检测 Angular 组件外的点击 [英] Detect click outside Angular component

问题描述

如何检测外部 Angular 组件的点击?

解决方案

import { Component, ElementRef, HostListener, Input } from '@angular/core';@成分({选择器:'选择器'，模板:`<div>{{文本}}

`})导出类另一个组件 {公共文本:字符串；@HostListener('document:click', ['$event'])点击(事件){if(this.eRef.nativeElement.contains(event.target)) {this.text = "点击里面";} 别的 {this.text = "点击外面";}}构造函数(私有 eRef:ElementRef){this.text = '还没有点击';}}

一个工作示例 - 单击此处

How can I detect clicks outside a component in Angular?

解决方案

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';
  }
}

A working example - click here

这篇关于检测 Angular 组件外的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！