單擊外部時關閉下拉列表的干凈方法

Question

我有一個按鈕，單擊后會打開一個下拉列表。

我想在按鈕外部單擊時關閉此列表。 所以我使用了一個HostListener像這樣：

@HostListener('click', ['$event.target'])
toggleDropdown(element) {
    const clickOnDropdownButton = (): boolean => {
        const buttonChildsClasses = ['button is-primary tog-button', 'dropdown-label', 'tog-icon tog-icon-arrow-down', 'icon is-small'];
        return buttonChildsClasses.indexOf(element.className) !== -1;
    };
    if (this.dropDownActive) {
        this.dropDownActive = false;
    } else if (!this.dropDownActive && clickOnDropdownButton()) {
        this.dropDownActive = true;
    }
}

這可行，但是我認為使用可能的childs數組根本不干凈。

確實，我按鈕的問題在於它由幾個HTML元素組成，我的按鈕不僅僅是button標簽。

我想到了使用position: absolute在其他元素之上放置HTML元素，但是我不確定它是否更干凈。

對這個問題有什么想法嗎？

Answer 1

 //this is your dropdown list in html 
    <div #dropdown> </div>

    //this is your ts

    @Component({ 
       host: {'(document:click)': 'handleClick($event)',}
      })


 @ViewChild('dropdown', {read: ElementRef}) dropdown: ElementRef;


    handleClick(event) {
    var clickedComponent = event.target;
            do {
                if (clickedComponent !== this.dropdown.nativeElement) {
                    it's call when we click outside the dropdown list
                }

            while (clickedComponent);
    }