角度 clickOutside 指令不起作用

Question

我制作了一个 div，它根据 bool（称为“菜单”）显示自己，我想这样做，如果用户在它之外单击，bool 会发生变化，因此菜单会被隐藏。我读过一篇关于这个的帖子，我搜索了一下，发现这已经是一些用户制作的了。

我尝试安装此one，自己创建文件并粘贴此code，甚至将最后一个更改为this，但它不起作用，我不知道为什么。

html如下：

<!-- Menu tarea-->
  <ng-container *ngIf="menu">
    <div (clickOutside)="abreMenu(this.tareaMenu)" class="popup-menu">
      <p>formulario here</p>
      <hr>
      <div>
        <button (click)="borrarTarea(this.tareaMenu)"></button>
        <span>Borrar</span>
      </div>
    </div>
  </ng-container>

您不必担心“abreMenu()”函数，它工作得很好。

新指令和安装的指令名称相同，但没有错误。我不知道我是否搞砸了导入，但我什么也没得到。

注意：这个 html 文件属于“MyModule”中的一个组件，该组件在“AppModule”中导入，并且我已经导入了“ClickOutsideModule”，因为我可能想通过应用程序全局使用它。

为什么它不起作用？谢谢。

Answer 1

您可以在组件中使用 HostListener，而不是使用 clickOutside 指令：

// somewhere inside your component
@HostListener('document:click', ['$event'])
  outsideClick(event: MouseEvent): void {
    this.abreMenu(this.tareaMenu)
  }

Answer 2

我上周刚遇到这个问题。我的解决方案是该指令必须是“其他”模块定义的一部分，因为使用它的组件包含在该其他模块中。

我没有尝试测试主 app.module 组件（通过导入其他模块）是否可以访问该指令，但该“其他”模块中的所有组件的问题都已解决。

这只是我的看法，但我认为 Angular 的模块系统存在一些严重问题，不要与 JavaScript 模块系统混淆。 Angular 需要采用 JavaScript（仅限）模块系统。