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

单击外部时关闭下拉列表的干净方法

1 个答案: