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（僅）模塊系統。