Angular 13组件选择器为何无法渲染下拉表单？

问题出在Bootstrap下拉组件的DOM结构要求上：触发下拉的按钮（带data-bs-toggle="dropdown"的元素）和.dropdown-menu必须是同一个父容器的直接子元素。

你把.dropdown-menu放到<app-filtri-ricerca>组件里后，实际DOM结构变成了这样：

<div class="col-sm-4">
  <h2 role="button" id="dropdownMenu2" ...>Ricerca per Filtri</h2>
  <app-filtri-ricerca>
    <div class="dropdown-menu" id="drp" aria-labelledby="dropdownMenu2">...</div>
  </app-filtri-ricerca>
</div>

.dropdown-menu不再是触发按钮的同级元素，Bootstrap的下拉插件找不到对应的菜单容器，自然无法正常渲染。

解决办法 #

方法1：调整组件结构，让触发按钮和菜单同层级 #

把触发按钮也放到<app-filtri-ricerca>组件里，保证两者在同一个父容器下：

<!-- app-filtri-ricerca 组件内容 -->
<div class="col-sm-4">
  <h2 role="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">Ricerca per Filtri</h2>
  <div class="dropdown-menu" id="drp" aria-labelledby="dropdownMenu2">
    <!-- 表单内容 -->
  </div>
</div>

然后在父组件里直接使用：

<app-filtri-ricerca></app-filtri-ricerca>

方法2：手动初始化下拉组件 #

如果不想调整组件结构，可以在组件挂载完成后，手动初始化下拉插件并指定菜单元素：

// 以Vue为例，在app-filtri-ricerca组件的mounted钩子中执行
import Dropdown from 'bootstrap/js/dist/dropdown'

mounted() {
  const triggerEl = document.getElementById('dropdownMenu2')
  const menuEl = this.$el.querySelector('.dropdown-menu')
  new Dropdown(triggerEl, {
    menu: menuEl
  })
}

方法3：给父容器添加.dropdown类 #

给包含触发按钮和组件的父容器加上.dropdown类，让Bootstrap能识别整个区域为下拉容器：

<div class="col-sm-4 dropdown">
  <h2 role="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">Ricerca per Filtri</h2>
  <app-filtri-ricerca></app-filtri-ricerca>
</div>

注意保持组件内.dropdown-menu的aria-labelledby属性正确指向触发按钮的ID（你当前的代码已经设置了aria-labelledby="dropdownMenu2"，这部分无需修改）。

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