Angular6和Bootstrap4可折叠div不起作用

Question

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

当我尝试使用我的角度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/

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

        "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"                        
        ]

Answer 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"
            ]

Answer 2

您需要为引导程序中的许多组件包含jQuery才能运行。

看看这个qazxsw boi，如果你评论jQuery，崩溃不起作用，当你取消注释它的工作原理。

来自bootstrap pen

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

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

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