本文介绍如何在 angular 中选用不依赖 angular material 的、真正支持多方向定位（上下左右）和多级嵌套的 standalone 下拉组件，并以 ng-bootstrap dropdown 为范例，提供可直接运行的配置方案与避坑要点。
本文介绍如何在 angular 中选用不依赖 angular material 的、真正支持多方向定位（上下左右）和多级嵌套的 standalone 下拉组件，并以 ng-bootstrap dropdown 为范例，提供可直接运行的配置方案与避坑要点。
在现代 Angular 应用中，越来越多团队选择剥离 Angular Material —— 或出于设计一致性考量，或为减小包体积，或因定制化需求过高。但移除 mat-menu 后，一个核心挑战随之浮现：如何实现真正可控的、支持任意方向弹出（top / bottom / left / right）且具备多级子菜单能力的下拉组件？ 关键在于：该组件必须是 standalone-ready（即无需 NgModule 即可导入使用），同时具备完善的定位策略、事件隔离机制与无障碍支持。
✅ 推荐方案：ngb-dropdown（来自 ng-bootstrap）
ngb-dropdown 是 Bootstrap 官方 Angular 实现（ng-bootstrap）提供的轻量级、无 jQuery 依赖的下拉组件，完全兼容 Angular standalone 架构，且原生支持：
- 多方向自动/手动定位（通过 placement 输入）
- 多级嵌套菜单（子 dropdown 可独立控制）
- 触发方式灵活（click / hover / manual）
- autoClose 精细控制（避免嵌套菜单意外关闭）
- ARIA 属性自动注入，符合 WCAG 2.1 标准
? 快速集成（Standalone 模式）
-
安装依赖
npm install @ng-bootstrap/ng-bootstrap
-
在组件中直接导入（无需 AppModule）
import { Component } from '@angular/core'; import { NgbDropdownModule, NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
@Component({ selector: 'app-custom-dropdown', standalone: true, imports: [NgbDropdownModule], // ← 关键：直接导入模块 template: `
⚠️ 关键注意事项
- autoClose="outside" 是嵌套菜单的生命线：默认 autoClose="true" 会导致点击子菜单时父菜单立即关闭。设为 "outside" 后，需手动调用 dropdown.close() 控制关闭逻辑（如监听子项 click 后关闭）。
- placement 支持完整方位组合：'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'bottom-right' 等，结合 fallbackPlacements 可启用智能回退。
- 若需响应式定位（如移动端自动转 bottom），建议结合 @HostListener('window:resize') 动态更新 placement。
- 所有 ngbDropdownItem 默认绑定 role="menuitem" 和键盘导航（↑↓→←+Enter），无障碍开箱即用。
? 替代方案横向对比（非 Material）
| 方案 | Standalone 支持 | 多方向定位 | 多级嵌套 | 包体积 | 自定义模板 | 备注 |
|---|---|---|---|---|---|---|
| ngb-dropdown | ✅（模块直导） | ✅（placement） | ✅（嵌套 ）
|
~35KB gzipped | ✅（ngbDropdownItem 内嵌 HTML） | 最成熟稳定，文档完善 |
| ngx-select-dropdown | ✅ | ❌（仅 bottom） | ❌ | ~28KB | ✅（optionItemTemplate） | 适合表单场景，非菜单式导航 |
| ng-select | ✅（v10+） | ✅（appendTo + CSS） | ⚠️（需自定义面板） | ~75KB | ✅（全模板控制） | 强大但偏重，适合复杂选择器 |
| 自研 + CDK Overlay | ✅ | ✅（OverlayPositionBuilder） | ✅ | ⚠️（CDK ~60KB） | ✅ | 灵活度最高，但开发成本高 |
✅ 总结：为什么 ngb-dropdown 是当前最优解？
- 零 Material 依赖：纯 Bootstrap CSS + Angular 原生指令，样式可完全覆盖；
- Standalone 友好：NgbDropdownModule 可直接 imports，无需改造现有模块结构；
-
开箱即用的多级菜单：通过嵌套 实现语义清晰、DOM 结构规范的层级；
- 精准定位控制：placement 属性配合 autoClose="outside"，兼顾灵活性与稳定性；
- 无障碍合规：自动处理 aria-haspopup, aria-expanded, role=menu 等关键属性。
? 提示：若项目已使用 Tailwind CSS，可搭配 @ng-bootstrap/ng-bootstrap 的无样式模式（ngbDropdown 仅提供行为逻辑），再用 Tailwind 完全重写 .dropdown-menu 样式——真正实现「行为与样式的彻底解耦」。
告别 mat-menu 并不意味着放弃专业体验。一个精心选型的 standalone 下拉组件，既能降低架构耦合度，又能为用户交付更精准、更可访问、更易维护的交互体验。
