Angular 5中ngx-bootstrap无Bootstrap navbar组件，求实现方法

嘿，我来帮你搞定这个问题！确实ngx-bootstrap没有单独的navbar组件，但我们可以直接用Bootstrap的原生navbar样式，结合Angular的特性和ngx-bootstrap的其他组件（比如Dropdown）来实现一个功能完整的navbar，步骤如下：

第一步：确保Bootstrap CSS已正确引入 #

ngx-bootstrap只提供组件的逻辑实现，样式还是依赖Bootstrap的CSS。你可以通过两种方式引入：

• 方式一：npm安装后配置
  先安装适配Angular 5的Bootstrap版本：npm install bootstrap@4.0.0 --save
  然后在angular.json的styles数组中添加："node_modules/bootstrap/dist/css/bootstrap.min.css"
• 方式二：直接引入CDN
  在项目根目录的index.html的<head>标签里添加：
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

第二步：构建Navbar组件 #

我们用Bootstrap原生的navbar类，结合Angular的路由、状态控制，再搭配ngx-bootstrap的Dropdown组件实现下拉菜单，下面是完整的组件示例：

组件TS代码（navbar.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  // 控制响应式菜单的展开/收起状态
  isMenuCollapsed = true;

  toggleMenu() {
    this.isMenuCollapsed = !this.isMenuCollapsed;
  }
}

组件HTML代码（navbar.component.html） #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Navbar 品牌/首页链接 -->
  <a class="navbar-brand" routerLink="/">我的Angular项目</a>

  <!-- 响应式汉堡按钮 -->
  <button class="navbar-toggler" type="button" (click)="toggleMenu()">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 导航菜单区域 -->
  <div class="collapse navbar-collapse" [class.show]="!isMenuCollapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/home" routerLinkActive="active">首页 <span class="sr-only">(当前页面)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about">关于我们</a>
      </li>
      <!-- 用ngx-bootstrap Dropdown实现下拉菜单 -->
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="moreMenu" role="button" ngbDropdownToggle>
          更多功能
        </a>
        <div class="dropdown-menu" aria-labelledby="moreMenu" ngbDropdownMenu>
          <a class="dropdown-item" routerLink="/profile">个人中心</a>
          <a class="dropdown-item" routerLink="/settings">设置</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" routerLink="/logout">退出登录</a>
        </div>
      </li>
    </ul>

    <!-- 右侧搜索框示例 -->
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</nav>

第三步：必要的模块导入 #

因为用到了ngx-bootstrap的Dropdown组件，需要在你的Angular模块（比如app.module.ts）中导入对应的模块：

import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // ...其他已导入的模块
    NgbDropdownModule
  ]
})
export class AppModule { }

关键细节说明 #

• routerLinkActive="active"会自动给当前激活的路由链接添加Bootstrap的active类，实现当前页面导航项的高亮
• 响应式菜单的展开/收起通过isMenuCollapsed变量控制，点击汉堡按钮时触发toggleMenu方法切换状态
• 下拉菜单完全复用ngx-bootstrap的Dropdown组件，无需自己写复杂的展开收起逻辑

这样你就得到了一个样式符合Bootstrap规范、功能完整的Angular导航栏啦！

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