如何检测 Angular 中元素外部的点击？

Question

当单击 open panel 按钮时，此 div 将作为东面板动态显示在页面上。 bool showEastPanel 变量用于打开和关闭东面板。我正在尝试使用 (clickoutside) 关闭面板（将 showEastPanel 设置为 false），但是打开的面板首先在 Angular 面板上运行，并将面板设置为 hook– true 然后 false 并且面板不显示。范围的任何方式 clickoutside 不包括按钮？

 <div [ngClass]="{'d-none': !showEastPanel, 'east-panel-container': showEastPanel}" (clickOutside)="ClosePanel()">
      <div id="east-panel">
        <ng-template #eastPanel></ng-template>
      </div>
</div>

<button (click)="ShowPanel()">Open Panel</button>

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

Answer 1

这是工作演示的链接： Stackblitz Demo

我会通过使用 Angular 推荐的方法来做到这一点，这种方法也很容易在没有 DOM 访问的环境中开发应用程序，我的意思是 Renderer 2 类是 Angular 以允许操作的服务形式提供的抽象您的应用程序的元素，而无需直接接触 DOM。

在这种方法中，您需要将 Renderer2 注入到您的组件构造函数中， Renderer2 让我们能够 listen 优雅地触发事件。它只是将您要收听的元素作为第一个参数，可以是 window ， document ， body 或任何其他 c1- 元素。对于第二个参数，它接受我们要监听的事件，在本例中是 click ，第三个参数实际上是我们通过箭头函数完成的回调函数。

 this.renderer.listen('window', 'click',(e:Event)=>{ // your code here})

解决方案的其余部分很简单，您只需要设置一个布尔标志来保持菜单（或面板）可见性的状态，我们应该做的是在单击时将 false 分配给该标志在菜单之外。

HTML

 <button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

<div class="menu" *ngIf="isMenuOpen" #menu>
I'm the menu. Click outside to close me
</div>

应用程序组件.ts

     export class AppComponent {
      /**
       * This is the toogle button elemenbt, look at HTML and see its defination
       */
      @ViewChild('toggleButton') toggleButton: ElementRef;
      @ViewChild('menu') menu: ElementRef;

      constructor(private renderer: Renderer2) {
        /**
         * This events get called by all clicks on the page
         */
        this.renderer.listen('window', 'click',(e:Event)=>{
             /**
              * Only run when toggleButton is not clicked
              * If we don't check this, all clicks (even on the toggle button) gets into this
              * section which in the result we might never see the menu open!
              * And the menu itself is checked here, and it's where we check just outside of
              * the menu and button the condition abbove must close the menu
              */
            if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
                this.isMenuOpen=false;
            }
        });
      }

      isMenuOpen = false;

      toggleMenu() {
        this.isMenuOpen = !this.isMenuOpen;
      }
    }

同样，如果您想查看工作演示，请使用此链接： Stackblitz Demo

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

Answer 2

你可以这样做

  @HostListener('document:mousedown', ['$event'])
  onGlobalClick(event): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
        // clicked outside => close dropdown list
     this.isOpen = false;
     }
  }

并为面板使用 *ngIf=isOpen

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