Đóng menu thả xuống khi lần thứ hai được mở/tài liệu.Nhấp vào bị chặn bằng cách nhấp vào Góc 5

Question

Tôi đang cố gắng tạo một chỉ thị cho một trình đơn thả xuống, miễn là tôi đang làm việc với một tài khoản. Tôi có thể phát hiện nhấp chuột bên ngoài thả xuống bằng cách sử dụng mã sau:

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

Sự cố xảy ra khi có 2 trình đơn thả xuống được tạo. Tôi muốn đóng cửa sổ thả xuống đầu tiên khi thứ hai được mở ra, tuy nhiên khi tôi nhấp vào menu thả xuống thứ hai, chỉ sự kiện "nhấp" được kích hoạt và "document.click" không được thực hiện. Tôi hy vọng rằng cả hai sự kiện sẽ xảy ra trừ khi tôi sử dụng rõ ràng preventDefault khi nhấp nhưng dường như điều này xảy ra tự động.

Phương pháp tiếp cận đúng trong Angular 5 là gì để đóng menu thả xuống đầu tiên khi lần thứ hai được mở?

Answer 1

Có lẽ bạn có thể thử một cái gì đó như thế này:

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

Vì vậy, thay vì có hai sự kiện xung đột với nhau bạn sẽ có một sự kiện với hai miếng của logic để xử lý chính xác những gì bạn cần tùy thuộc nếu bạn nhấp vào bên trong hoặc bên ngoài chính yếu tố đó. Có ý nghĩa?

Điều này được lấy từ here

Answer 2

Làm cách nào để tạo chỉ thị mà bạn có thể sử dụng ở mọi nơi?

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

và bạn có thể sử dụng nó như thế này:

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