使用 ng-bootstrap 无法折叠答案

【问题标题】：Collapse does not work using ng-bootstrap使用 ng-bootstrap 无法折叠
【发布时间】：2022-07-02 10:38:54
【问题描述】：

我是第一次使用 Angular 和 ng-bootstrap，我遇到了 Collapse 组件的问题。我要做的就是使用 Bootstrap 折叠/展开 div。我的问题是 button 不起作用，a （链接）实际上正在导航（将 href 作为指向 http://#collapseExample 的文字超链接！就好像该站点无法识别引导程序，但是ngb-accordion 确实有效。

我对自己可能做错了什么感到困惑，非常感谢任何帮助。

代码取自官方引导站点 (https://getbootstrap.com/docs/4.0/components/collapse/) 虽然 Bootstrap 4 和 5 可能不同 - 我使用的是最新版本的 Angular 和 ngbootstrap。

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
        aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
        aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

编辑：这里是一些附加信息：

我的 package.json 的依赖项部分中有 "@ng-bootstrap/ng-bootstrap": "^12.1.2",。

我的 styles.css 中也有 @import '~bootstrap/scss/bootstrap';。

app.module.ts 有 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';，其中 NgbModule 被添加到 @NgModule 声明的导入部分。

【问题讨论】：

你确定你已经正确导入了bootstrap css和js文件吗？
我修改了我的答案以做出回应。我不确定是否有一个 js 文件我应该在我在项目中安装包的方式之外导入。我错过了什么吗？

标签： angular ng-bootstrap

【解决方案1】：

ngb-bootstrap 是不是引导

Ngb-bootstrap 是一个 Angular 组件库，它仅使用 bootstrap.css（也不是 bootstrap.bundle.min.js 或 popper.min.js 或 bootstrap.min.js）

因此，要使用 ngb-bootstrap，您应该按照docs 中的说明进行安装，下载 bootstrap.min.css（例如，下载到 css/bootstrap 文件夹中）并在 angular.json 中添加 .css

"styles": [
      "src/styles.css",
      "css/bootstrap/bootstrap.min.css"
    ],

然后在docs of ng-boostrap 中使用折叠，而不是在引导程序文档中

【讨论】：