angular - Bootstrap 的 js 元素即使已导入也无法正常工作

Question

我要使用 Bootstrap 提供的折叠功能。因此我安装了 jQuery 和 popper.js:

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

Bootstrap 本身可以工作，但它的 js 元素不能，例如我不能使用依赖于 data-toggle 的折叠功能。

"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"bootstrap": "^4.3.1",
"canvasjs": "^1.8.1",
"core-js": "^2.5.4",
"hamburgers": "^1.1.3",
"hover.css": "^2.3.2",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"},

有没有人看到这个问题或遇到过类似的事情？

Answer 1

Bootstrap 不仅仅依赖于 CSS——它还有 JavaScript 元素。但问题是，angular 并不知道 JavaScript 的那部分 - 因为它是在自己的时间创建 Bootstrap 小部件，所以即使你包含它，Bootstrap JS 也不会在适当的时间看到它。

这就是为什么您必须使用专用的 Bootstrap 库，例如 ngx-bootstrap或 ng-bootstrap而不是直接 Bootstrap 。因此，删除 jQuery，删除 bootstrap，并包含 Angular 的 Bootstrap 库之一。