检测 Angular 组件外的点击 [英] Detect click outside Angular component
本文介绍了检测 Angular 组件外的点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何检测外部 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屋!
查看全文