如何从Bootstrap下拉菜单获取innerHTML文本，避免重复传参？

你可以借助Angular的事件对象来自动获取菜单项的文本内容，无需手动重复传参，具体操作如下：

1. 修改模板，传入事件对象 #

把下拉项的点击事件改为携带$event参数，让函数能拿到触发点击的DOM元素：

<ul class="dropdown-menu">
  <li>
    <a class="dropdown-item" href="#" (click)="getMyValue('myvalue', $event)">My Value</a>
  </li>
  <li>
    <a class="dropdown-item" href="#" (click)="getMyValue('someothervalue', $event)">Some Other Label</a>
  </li>
</ul>

2. 更新函数，提取文本内容 #

修改getMyValue函数，新增事件参数，通过事件对象直接获取点击元素的文本，用trim()可以清除文本前后可能存在的多余空格：

getMyValue(todo: string, event: Event) {
  console.log("selected value is:", todo);
  // 获取并处理选中项的文本
  const selectedText = (event.target as HTMLElement).textContent?.trim() || '';
  console.log("selected text is:", selectedText);
}

简单说明 #

$event是Angular内置的事件对象，通过它能访问到触发点击的<a>标签元素。textContent属性可以直接读取该标签内的文本内容，trim()则是为了避免文本前后的换行或空格影响输出结果。

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