如何正确地将 bootstrap 添加到 Angular 应用程序

Question

我创建了 Angular 应用程序并使用“npm install bootsrap”安装 bootstrap 并将路径添加到 angular.json 文件。但是当我创建一个按钮并添加引导类时，输出不显示应用引导类。

有人可以帮我解决这个问题吗...谢谢

Answer 1

首先，您需要将 bootstraplatest (5) 添加为 npm 包，如下所示：

npm install bootstrap@next

在你的 angular.json 添加 bootstrap 样式表和 javascript：

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

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

现在添加 popperjs 并将其添加到您的脚本中：

npm install @popperjs/core
"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

现在让我们测试一下一切是否正常 将下拉组件添加到您的 app.component.html

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton1"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

您应该能够单击并查看下拉菜单项