Bootstrap 下拉菜单不显示项目

Question

我在我的项目中使用 angular 12，但我遇到了一个问题，bootstrap 的下拉菜单没有显示项目我的 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
Bootstrap

第 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 也建议解决这个问题。

步骤 1：安装 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 下拉指令应用于下拉列表。

<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

Bootstrap 下拉菜单不显示项目

Bootstrap dropdown don't show items

html

angular-ui-bootstrap

bootstrap-4

angular

解决方案 1

解决方案 2