Angular条件激活下拉列表点击项未触发事件问题求助

核心问题是按钮的focusout事件优先级高于列表项的click事件：当点击列表项时，按钮先失去焦点触发focusout，执行toggleSelectionMenu()把selectionMenu设为false，*ngIf立刻隐藏了<ul>，导致列表项的click事件根本没机会触发。

下面给两种可行的解决方案：

方案一：延迟focusout的菜单关闭操作 #

给按钮的focusout事件添加延迟，让列表项的click先执行完成：

<div>
<button type="button"
    (click)="toggleSelectionMenu()" 
    (focusout)="setTimeout(() => toggleSelectionMenu(), 100)">
    <span> {{ selected }} </span>
</button>
<ul
    tabindex="-1" *ngIf="selectionMenu" [@selectionMenuInOut]>
    <li (click)="subject_select(subject)" *ngFor="let subject of subjects">
        <span>{{ subject }}</span>
    </li>
</ul>
</div>

延迟时长设为100ms，刚好匹配你的动画时长，确保点击事件先完成再隐藏菜单。

方案二：全局点击监听实现外部关闭（更推荐） #

改用监听文档点击的方式判断是否点击组件外部，避免focus事件的时序冲突：

修改TypeScript代码 #

import { Component, HostListener } from '@angular/core';

@Component({
  // 替换成你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  selectionMenu: boolean = false;
  subjects = ['Website errors', 'Need support', 'Pizza!'];
  selected: string = 'Choose subject of the request';

  subject_select(subject: string) {
    this.selected = subject;
    this.selectionMenu = false; // 选中后直接关闭菜单
  }

  toggleSelectionMenu() {
    this.selectionMenu = !this.selectionMenu;
  }

  @HostListener('document:click', ['$event'])
  handleDocumentClick(event: MouseEvent) {
    const target = event.target as HTMLElement;
    // 判断点击是否在按钮或菜单内部
    const isInsideComponent = target.closest('button') || target.closest('ul');
    if (!isInsideComponent && this.selectionMenu) {
      this.selectionMenu = false;
    }
  }
}

修改HTML代码（移除focusout事件） #

<div>
<button type="button" (click)="toggleSelectionMenu()">
    <span> {{ selected }} </span>
</button>
<ul
    tabindex="-1" *ngIf="selectionMenu" [@selectionMenuInOut]>
    <li (click)="subject_select(subject)" *ngFor="let subject of subjects">
        <span>{{ subject }}</span>
    </li>
</ul>
</div>

这种方法逻辑更清晰，能精准处理外部点击关闭的需求，不会出现事件时序冲突的问题。

内容的提问来源于stack exchange，提问作者snenson