Angular 13中Bootstrap5 Navbar功能异常求助

核心问题分析 #

• 版本冲突：你同时引入了Bootstrap 4的CSS/JS资源，却使用Bootstrap 5的Navbar代码，版本不兼容会直接导致交互逻辑失效。
• 冗余且冲突的JS引入：@ng-bootstrap/ng-bootstrap是纯Angular实现的Bootstrap组件库，完全不需要引入Bootstrap原生JS文件。原生JS的DOM操作机制和Angular的变更检测机制存在冲突，这就是下拉菜单、折叠按钮点击无响应的直接原因。

Angular 13对Bootstrap Navbar的支持情况 #

Angular 13完全支持Bootstrap Navbar，不管是使用@ng-bootstrap/ng-bootstrap提供的封装组件，还是直接使用Bootstrap纯HTML/CSS结构配合自定义Angular交互逻辑，都能正常运行。

修复步骤 #

1. 删掉index.html中手动引入的Bootstrap 4 CSS和JS资源，ng add @ng-bootstrap/ng-bootstrap命令已经自动为你配置好了Bootstrap 5的依赖，无需手动重复引入。
2. 确保Navbar代码和@ng-bootstrap/ng-bootstrap的用法匹配：使用ngb-navbar、ngb-nav、ngb-dropdown这类Angular组件替代纯原生Bootstrap 5的HTML结构，这样组件的交互逻辑会由ng-bootstrap的Angular代码处理，避免冲突。

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