logo标签列表

检测 Angular 组件外的点击事件

htmleventsangulartypescript
180

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

请参考 https://dev59.com/GlsW5IYBdhLWcg3wATLe#35527852。 - Günter Zöchbauer
还有这个答案：https://dev59.com/dlUK5IYBdhLWcg3w4TKN#51152404 - Mohammad Kermani
12个回答
0

使用rxjs使代码整洁易读。 我在aggrid自定义单元格编辑器中使用它来检测自定义单元格编辑器内的点击事件。

private clickSubscription: Subscription | undefined;

public ngOnInit(): void {
this.clickSubscription = fromEvent(document, "click").subscribe(event => {
      console.log("event: ", event.target);
      if (!this.eRef.nativeElement.contains(event.target)) {
        // ... click outside
      } else {
        // ... click inside
    });
    
    
public ngOnDestroy(): void {
    console.log("ON DESTROY");
    this.clickSubscription?.unsubscribe();
  }

0

你可以像调用 (focusout) 或者 (blur) 一样调用事件函数；然后在你的代码中加入：

<div tabindex=0 (blur)="outsideClick()">raw data </div>

outsideClick() {
  alert('put your condition here');
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接