Navbar 上的下拉菜单无法使用 bootstrap 5 使用 ng add 安装方法

Question

我的设置：

我正在使用 Angular 11.2.11，Bootstrap 5，运行ning Windows。我正在运行ning 的项目正在使用 SCSS。

问题：

我正在使用 bootstrap 文档 (found here) 中提供的代码将导航栏添加到我的网站：

因此，在我的终端上，在我的文件夹项目中，我运行执行以下命令：

ng add @ng-bootstrap/ng-bootstrap

但是，下拉菜单不起作用，我点击它但没有任何反应。

我用的bootstrap安装方法是found here

我试过的：

我找到的所有解决方案都来自其他类型的安装（即在 Angular 和 Bootstrap 的旧版本上手动安装）。

Bootstrap教程（found here），说我不需要手动添加Jquery和Popper（我在Angular之前的版本中找到的解决方案并且Bootstrap说我需要手动添加它，但它也不起作用，并且不建议在新版本的官方安装指南中使用。

我尝试在 angular.json 文件中插入 bootstrap 位置，但也不起作用，如下所示：

            "styles": [
              "../Istim/node_modules/bootstrap/scss/bootstrap.scss",
              "src/styles.scss"
            ],

还尝试了以下命令：npm install jquery popper.js --save

Answer 1

补充我的评论，在你的模块中导入 NgbDropDownModule 之后

import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
    imports: [..., NgbDropdownModule],
    ...
})

并添加 bootstrap.css（最好的选择是将其包含在 angular.json 文件中）

你可以写（看看ngbDropdown、ngbDropdropToggle和ngbDropdownMenu在哪里）

只是在 bootstrap nav-bar

的示例中添加了之前的“指令”

<li class="nav-item dropdown" ngbDropdown class="d-inline-block">
          <a class="nav-link dropdown-toggle" href="#" ngbDropdownToggle 
                 id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

要制作“折叠菜单”，我们可以使用自己的 NgbCollapseModule，如 docs of ngb-bootstrap

中所示

实际上它只声明了一个变量 isMenuCollapsed:boolean=false 并在按钮中

<button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed" 
         aria-label="Toggle navigation">

当然我们将指令[ngbCollapse]添加到菜单

<div [ngbCollapse]="isMenuCollapsed" 
     class="collapse navbar-collapse position-relative" id="navbarSupportedContent">

我真的很喜欢“可折叠”菜单位于 div 绝对位置以“浮动”在菜单页面上。好吧，有点复杂，我不太擅长 .css，但在这个 fool stackblitz 中（我还使用 FormControl 添加了“搜索”作为输出）我留下了一个导航栏，如“ bootstrap"

Navbar 上的下拉菜单无法使用 bootstrap 5 使用 ng add 安装方法

Dropdown menu on Navbar not working on bootstrap 5 using ng add installation method

sass

angular

bootstrap-5