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

Question

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

Answer 1

您需要包含 jQuery 才能使 bootstrap 中的许多组件正常运行。

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

来自 bootstrap docs

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

您包含的 bootstrap 包不包含 jQuery。来自 npm、

Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.

Answer 2

你的代码对我来说工作得很好。

请找到以下配置

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

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

Angular6 and Bootstrap4 collapsible div does not work

collapse

bootstrap-4

angular

angular6