Açılırken açılır kapanır/document.click tıklatılarak engellenir Açısal 5

Question

Tek bir ile çalıştığım sürece, bir çekicilik gibi çalıştığı sürece, bir açılır menü için bir yönerge oluşturmaya çalışıyorum. Aşağıdaki kodu kullanarak açılan kutuyu tıklatabilirim:

@HostListener('document:click', ['$event']) 
    onDocumentClick(event: any): void { 
    console.log("document click"); 
    // close 
} 
@HostListener('click') 
    onClick(): void { 
    console.log('click on '); 
    // toggle 
    } 

Oluşan 2 açılırsa sorun ortaya çıkar. İkinci açıldığında ilk açılır menüyü kapatmak istiyorum, ancak ikinci açılır menüyü tıklattığımda, yalnızca "tıklatma" olayı tetikleniyor ve "document.click" gerçekleştirilmiyor. ClickDefault'u açıkça tıkladığım sürece, her iki olayın da gerçekleşmesini beklerdim, ancak bu otomatik olarak gerçekleşir.

İkinci açıldığında ilk açılan menüyü kapatmak için Açısal 5'te doğru yaklaşım ne olmalıdır?

Answer 1

Belki böyle bir şey deneyebilirsiniz:

@HostListener('document:click', ['$event']) 
    onClick(event) { 
    if(this.eRef.nativeElement.contains(event.target)) { 
     // toggle logic 
    } else { 
     // close logic 
    } 
} 

Bunun yerine birbiriyle çelişen iki etkinlik olmasının Eğer mantığın iki adet tek olay içeri tıklandığında eğer bağlı olarak ihtiyaç tam olarak ne şekilde elde etmelidir veya elemanın kendisinin dışında. Mantıklı?

Bu

nasıl her yerde kullanabileceğiniz bir yönerge oluşturma hakkında here

Answer 2

alındı?

@Directive({ 
    selector : '[clicked-outside]' , 
    host  : { 
     '(document:click)' : 'onClick($event)', 
     '(document:touch)' : 'onClick($event)', 
     '(document:touchstart)' : 'onClick($event)' 
    } 
}) 
export class ClickedOutsideDirective { 
    @Input('clicked-outside') callback : Function; 

    constructor (private _el : ElementRef) { 
    } 

    private onClick (event : any) { 
     if (this.clickedOutside(event)) { 
      if (this.callback) { 
       this.callback(); 
      } 
     } 
    } 

    private clickedOutside (event : any) { 
     let clickedTarget = event.target; 
     let host   = this._el.nativeElement; 
     do { 
      if (clickedTarget === host) { 
       return false; 
      } 
      clickedTarget = clickedTarget.parentNode; 
     } while (clickedTarget); 
     return true; 
    } 
} 

ve bu gibi kullanabilirsiniz:

@Component({ 
    selector:'your-dropdown', 
    template:` 
     <div class="your-dropdown-top-most-wrapper" [clicked-outside]="onClickOutSide"></div> 

    ` 
}) 
export class YouDropdownComponent{ 


    public onClickOutSide =()=>{ 


     this.closeMyDropdown()// this is your function that closes the dropdown 
    } 
}