秒を開くとドロップダウンを閉じる/ document.clickをクリックしてブロックするAngular 5

Question

私はドロップダウンのディレクティブを作成しようとしています。

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

2つのドロップダウンが作成されている場合に問題が発生します。私は2番目のドロップダウンを閉じると最初のドロップダウンを望みますが、2番目のドロップダウンをクリックすると、 "クリック"イベントだけがトリガされ、 "document.click"は実行されません。クリックでpreventDefaultを明示的に使用しない限り、両方のイベントが発生するはずですが、明らかにこれは自動的に発生します。

秒を開いたときに最初のドロップダウンを閉じるには、角度5で正しいアプローチが必要ですか？

Answer 1

たぶん、あなたはこのような何かを試すことができます。

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

だからではなく、互いに相反する2つのイベントがあるのあなたは、ロジックの2枚で一つのイベントは、あなたが内側にクリックした場合は、依存する必要が正確に何を処理するために必要がありますが要素自体の外側に存在してもよい。意味がありますか？

これは、あなたがどこでも使用することができますディレクティブを作成する方法についてhere

Answer 2

方法から取られたのですか？

@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; 
    } 
} 

、あなたはこのようにそれを使用することができます：

@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 
    } 
}