Bootstrap 下拉菜单不显示项目

Question

我在我的项目中使用了 angular 12，但我遇到了一个问题，我从引导程序中的下拉菜单没有显示项目 我的html代码：

<nav class="navbar navbar-expand navbar-dark">
  <a class="navbar-brand" routerLink="/">
    <img src="assets/bot.png" alt="END Logo">
  </a>
  <div class="nav navbar-nav">
    <a class="nav-item nav-link" routerLink="/commands" routerLinkActive="active">
      <i class="fa fa-code" aria-hidden="true"></i>
    </a>
    <a class="nav-item nav-link" routerLink="/docs" routerLinkActive="active">
      <i class="fa fa-book" aria-hidden="true"></i>
    </a>
    <a class="nav-item nav-link" [href]="githubURL" routerLinkActive="active">
      <i class="fab fa-github" aria-hidden="true"></i>
    </a>
    <a class="nav-item nav-link" [href]="discordInvite" routerLinkActive="active">
      <i class="fab fa-discord"></i>
    </a>
  </div>
  <div class="nav navbar-nav ml-auto">
    <div *ngIf="!user">
      <a class="nav-item nav-link" routerLink="/login"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
    </div>
    <div *ngIf="user">
      <div class="dropdown">
        <a class="nav-item nav-link dropdown-toggle"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img [src]="user.displayAvatarURL"> {{ user.username }}
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" routerLink="/dashboard">Dashboard</a>
          <hr class="m-1">
          <a class="dropdown-item" routerLink="/logout">Logout</a>
        </div>
      </div>
    </div>
  </div>
</nav>

我做错了什么，如何解决？

Answer 1

解决方案 1

Bootstrap 下拉菜单需要这 3 个依赖项：

• jQuery
• popper.js
• 引导程序

第 1 步：使用以下命令将这 3 个依赖项安装到您的 Angular 应用中：

npm install jquery
npm install popper.js
npm install bootstrap

第 2 步：将这些 .js 文件添加到 angular.json scripts 部分，以便将这 3 个 .js 文件呈现为 HTML。

angular.json

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

---

解决方案 2

Angular Bootstrap Dropdown 也建议解决此问题。

第一步：安装Angular Bootstrap (NG Bootstrap)。

npm install @ng-bootstrap/ng-bootstrap

第 2 步：将 NgbModule 添加到 app.module.ts imports 部分。

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

@NgModule({
  imports: [.., NgbModule],
  ..
})

第 3 步：将 Angular Bootstrap Dropdown 指令应用于下拉菜单。

<div ngbDropdown class="nav-item">
  <a ngbDropdownToggle id="dropdownMenuButton" class="nav-link" aria-haspopup="true" aria-expanded="false"> 
    <img [src]="user.displayAvatarURL"> {{ user.username }}
  </a>
  <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
    <a ngbDropdownItem routerLink="/dashboard">Dashboard</a>
      <hr class="m-1">
    <a ngbDropdownItem routerLink="/logout">Logout</a>
  </div>
</div>

Sample solution on StackBlitz