초를 열었을 때 드롭 다운 닫기/클릭하여 문서. 클릭 차단 각도 5

Question

드롭 다운에 대한 지시문을 만들려고 노력합니다. 단 하나의 매력으로 작동하는 한 매력처럼 작동합니다. 다음 코드를 사용하여 외부 드롭 다운을 볼 수 있습니다.

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

두 개의 드롭 다운이 생성되면 문제가 발생합니다. 두 번째 드롭 다운을 클릭하면 마지막 첫 번째 드롭 다운을 원하지만 두 번째 드롭 다운을 클릭하면 "클릭"이벤트 만 트리거되고 "document.click"은 실행되지 않습니다. 클릭 할 때 preventDefault를 명시 적으로 사용하지 않으면 두 이벤트가 모두 발생해야합니다.하지만이 상황은 자동으로 발생합니다.

초를 열 때 첫 번째 드롭 다운을 닫으려면 각도 5에서 올바른 접근 방식을 선택해야합니다.

Answer 1

어쩌면 당신은 이런 식으로 뭔가를 시도 할 수 있습니다 :

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

그래서 그 대신 서로 충돌이 이벤트를 갖는 당신은 논리의 두 가지로 하나의 이벤트는 내부를 클릭 할 경우 따라 필요 정확하게 처리 할 것을 또는 요소 자체 외부에 존재할 수있다. 말이된다?

이

은 어떻게 모든 곳에서 사용할 수있는 지침을 만드는 방법에 대해 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 
    } 
}