Angular 6 和 Bootstrap 4 可折叠 div 不起作用答案

【问题标题】：Angular6 and Bootstrap4 collapsible div does not workAngular 6 和 Bootstrap 4 可折叠 div 不起作用
【发布时间】：2019-02-23 01:08:55
【问题描述】：

bootstrap4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example 提供手风琴控制

当我尝试将它与我的 angular 6 应用程序一起使用时，它不会崩溃。浏览器中没有错误，但它不起作用。对这个有什么想法吗？

html

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

**** 编辑 ****

这是实时代码示例 https://stackblitz.com/github/Rugved/ng6bt4Demo/

***** 编辑 **** jquery 包含在 angular.json 文件中

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

【问题讨论】：

抱歉，您能进一步解释一下吗？这只是引导代码，没有需要观察的 api 调用。
对不起！！删除了之前的评论。我是为了其他问题
你能检查一下你是否在 package.json 中包含了引导依赖项吗？
是的，如果你检查链接，你可以看到引导样式被应用
@SubSUl 提到的请包括 jQuery

标签： angular bootstrap-4 angular6 collapse

【解决方案1】：

您的代码非常适合我。

请找到以下配置

package.json

{
"bootstrap": "^4.1.3",
"popper.js": "^1.14.3",
"jquery": "3.3.1"
}

angular.json

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

【讨论】：

谢谢 Pratap，但我的包裹里确实有这个。订单不同，所以我更新为您的，但仍然无法正常工作。对你起作用吗？有机会上传你的演示吗？
我必须重建项目，它现在可以工作了。我错过了 jquery，我认为顺序不对

【解决方案2】：

您需要包含jQuery 才能使引导程序中的许多组件正常工作。

查看此pen，如果您评论 jQuery，collpase 不起作用，当您取消注释时它起作用。

来自引导程序docs

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。将以下 s 放在页面末尾附近，在结束标签之前，启用它们。 jQuery 必须来首先是 Popper.js，然后是我们的 JavaScript 插件。

您包含的引导程序包不包含 jQuery。来自npm，

捆绑的 JS 文件（bootstrap.bundle.js 和缩小的 bootstrap.bundle.min.js）包括 Popper，但不包括 jQuery。

【讨论】：

大家好，我确实在 package.json 文件中包含了 jquery。还是没有效果