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

问题描述

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

code>从'@ angular / core'导入{Component，ElementRef，HostListener，Input};

@Component（{
selector：'selector'，
template：`
< div>
{{text}}
< / div>
`
}）
导出类AnotherComponent {
public text：String;

@HostListener（'document：click'，['$ event']）
clickout（event）{
if（this.eRef.nativeElement.contains（event.target ））{
this.text =点击里面;
} else {
this.text =点击外部;



构造函数（private eRef：ElementRef）{
this.text ='no clicks yet';
}
}

Plunker工作示例 - 点击这里

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

Plunker working example - click here

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