Angular 15.0.0中Navbar仅显示标题其余内容缺失问题求助

问题描述 #

正在使用Angular 15.0.0开发，Navbar仅显示“Racipe Book!”标题，其余导航项（Recipes、Shopping List、Manage下拉菜单）均未显示。使用的Navbar代码如下：

<nav class = "navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class ="navbar-brand">Racipe Book!</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Recipes</a></li>
        <li><a href="#">Shopping list</a></li>
      </ul>
      <ul class = "nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" role = "button"> Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">saving data</a></li>
            <li><a href="#">fetch data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

当前显示效果：

预期显示效果：

已尝试降级Bootstrap、引入ng-bootstrap组件，但均出现终端报错，问题未解决。

可能的原因与解决方案 #

1. Bootstrap版本类名不兼容（核心问题） #

你用的navbar-default是Bootstrap 3的类名，Angular 15通常搭配Bootstrap 5使用，两者类名结构差异极大，这是导航内容不显示的主要原因。

修复方案：适配Bootstrap 5规范重写Navbar

替换原有代码为Bootstrap 5标准Navbar结构：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Racipe Book!</a>
    <!-- 移动端折叠按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Recipes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Shopping list</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Manage
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">saving data</a></li>
            <li><a class="dropdown-item" href="#">fetch data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

2. 确保Bootstrap资源正确引入 #

在Angular 15中正确配置Bootstrap 5：

• 安装指定版本：npm install bootstrap@5.3.0
• 打开angular.json，在styles和scripts数组中添加资源路径：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]
  

  注意：必须引入bootstrap.bundle.min.js，它包含Popper.js，是下拉菜单等交互组件的必需依赖。

3. 解决ng-bootstrap版本匹配问题 #

如果要使用ng-bootstrap，需保证版本与Angular 15兼容：

• 安装对应版本：npm install @ng-bootstrap/ng-bootstrap@14.0.0
• 在app.module.ts中导入模块：

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    imports: [
      // ...其他模块
      NgbModule
    ]
  })
  export class AppModule { }
  

  之后直接使用ng-bootstrap封装的Navbar组件，避免原生类名不兼容问题。

4. 排查CSS冲突 #

检查自定义样式或第三方样式是否覆盖了Bootstrap的navbar-collapse类，导致内容被强制隐藏。可以通过浏览器开发者工具查看元素的display属性，确认是否被设置为none且未触发展开逻辑。

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