angulaire 2 addEventListener intérieur directive

Question

J'écris l'application angulaire 2 et à l'intérieur j'ai le menu déroulant écrit sur Bootstrap

<li class="dropdown" dropdown> 
    <a class="dropdown-toggle" data-toggle="dropdown"> 
     User <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu" aria-labelledby="download"> 
     <li><a routerLink="/user/profile">My Profile</a></li> 
     <li><a (click)="logout()">Log Out</a></li> 
    </ul> 
</li> 

Tout ce que je veux est d'écrire une petite directive pour le menu basculer. Fin ici est le:

@Directive({ 
    selector: "[dropdown]" 
}) 
export class DropdownDirective implements OnInit { 

    private isOpen = false; 
    private defaultClassName: string; 

    @HostListener('click') toggle() {    

    let that = this; 

    if (!this.isOpen) { 

     this.elRef.nativeElement.className = this.defaultClassName + " open"; 

     document.addEventListener("click",() => {    
      that.elRef.nativeElement.className = that.defaultClassName; 
      that.isOpen = false; 
      document.removeEventListener("click"); 
     }); 

     this.isOpen = !this.isOpen; 
    } 


    } 

    constructor(private elRef: ElementRef) { 

    }  

    ngOnInit(): void { 
     this.defaultClassName = this.elRef.nativeElement.className; 
    } 

} 

Semble bon. Mais ne fonctionne pas. Après un court débogage, j'ai trouvé que l'écouteur d'événement, qui a été ajouté au document, se déclenche juste après qu'il a été assigné. Comme un menu de faits fermant juste après son ouverture. Comment réparer et pourquoi cela arrive?

Answer 1

J'ai résolu la même situation avec un @HostListener(). Sur le composant tenant le menu déroulant:

@HostListener('document:click', ['$event']) 
 
private clickAnywhere(event: MouseEvent): void { 
 
\t if (this.IsSelected && !this.elementRef.nativeElement.contains(event.target)) { 
 
\t \t this.IsSelected = false; 
 
\t } 
 
}

this.IsSelected est la propriété de liaison que j'utilise pour afficher le menu déroulant. La condition dans le if() vérifie si l'utilisateur a cliqué sur le menu ou le corps du document en général.

Assurez-vous d'injecter refElément dans le constructeur afin que vous puissiez accéder au rendu HTML pour vérifier si tel est ce qui a été cliqué: public constructor(private elementRef: ElementRef) { }

Vous pouvez en savoir plus sur HostListener here.