Angular clickOutside 指令不起作用

Question

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

我试过安装这个，自己创建文件并粘贴这个代码，甚至把最后一个改成这个，但它不起作用，我不知道为什么。

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()”function，它工作得很好。

新指令和安装的指令都被称为相同，但没有错误。 我不知道我是否搞砸了进口，但我什么也没得到。

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

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

Answer 1

代替使用 clickOutside 指令，您可以在组件内使用 HostListener：

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

Answer 2

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

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

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