दूसरी बार खोला जाने पर ड्रॉपडाउन बंद करें/document.click क्लिक करके अवरुद्ध करें कोणीय 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 ड्रॉपडाउन बनाए जाते हैं। जब दूसरा खोला जाता है, तो मैं पहली बार ड्रॉप-डाउन बंद करना चाहता हूं, हालांकि जब मैं दूसरे ड्रॉपडाउन पर क्लिक करता हूं, तो केवल "क्लिक" ईवेंट ट्रिगर हो रहा है और "document.click" निष्पादित नहीं हो रहा है। मैं उम्मीद करता हूं कि दोनों घटनाएं तब तक होनी चाहिए जब तक कि मैं स्पष्ट रूप से क्लिक पर रोकथाम का उपयोग नहीं करता लेकिन स्पष्ट रूप से यह स्वचालित रूप से होता है।

दूसरा खोला जाने पर पहले ड्रॉप-डाउन को बंद करने के लिए कोणीय 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 
    } 
}