Angular clickOutside 指令不起作用

Question

I made a div which shows itself depending on a bool (called "menu"), and I wanted to make it so if the user clicks outside of it, the bool changes and therefore, the menu is hidden. I've read a post about this and I've searched a bit about it, and I found that this is already made by some users.

I've tried installing this one , creating the file myself and pasting this code , or even changing the last one to this , but it won't work and I don't know why.

The html is the following:

<!-- 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>

You don't have to worry about the "abreMenu()" function, that works just fine.

Both the new directive and the one installed are called the same, but there are no errors. I don't know if I messed the imports up but I'm getting nothing.

NOTE: This html file belongs to a component within "MyModule", which is imported in "AppModule", and there I've imported the "ClickOutsideModule" since I'd probably want to use it globally through the app.

Why isn't it working? Thanks.

Answer 1

Instead using the clickOutside directive you could use a HostListener inside your component:

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

Answer 2

I just experienced this problem last week. My solution was that the directive had to be a part of the "other" module definition, because the component which used it, was contained in that other module.

I didn't try to test if the main app.module components(via the import of the other module) could access the directive, but the problem was solved for all components in that "other" module.

It's just my opinion but I think Angular has some serious issues with it's module system, not to be confused with the JavaScript module system. Angular needs to adopt the JavaScript (only) module system going forward.