Bootstrap 组件的角度问题

Question

我正在使用 Angular 12 构建网站，我认为这不相关，但我正在使用 sccs。 我在使用引导模块时遇到问题，例如下拉、模式和工具提示，它们基本上是我最需要的组件。 我使用“npm install bootstrap”安装了引导模块。 我的脚本数组是这样配置的：

"scripts": [ 
"node_modules/jquery/dist/jquery.slim.min.js", 
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]

我尝试使用的下拉列表代码是： https://getbootstrap.com/docs/5.1/components/dropdowns/

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

你能帮帮我吗？

Answer 1

您只需导入 Popperjs 两次导致问题，因此删除 popperjs 和 bootstrap.min.js 导入将解决您的问题，否则请按照以下给定步骤操作

在 Angular 中使用引导程序的步骤。

1. 安装引导程序

   • npm install bootstrap --save

2. 在 angular.json 文件中

   • 在样式数组下导入bootstrap.min.css

     • "node_modules/bootstrap/dist/css/bootstrap.min.css"

   • 在 scripts array 下导入 bootstrap.bundle.min.js 文件，因为 popper.js 包含在 bootstrap.bundle.js 文件中。如果你只导入 bootstrap.js 那么你必须在 bootstrap.js 之前导入 popper.js 以获取更多信息Check Bootstrap Docs

     • "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

Angular.json file content

对于 Jquery

1. 如果您还想使用 jquery，请在 bootstrap.bundle.min.js 之前导入 jquery。

2. 从 npm 安装 jquery 类型

   • npm install --save @types/jquery

3. 在angular.json文件中导入jquery

   • "node_modules/jquery/dist/jquery.min.js"

4. 在tsconfig.app.json文件的compilerOptions

   下添加jquery类型
   • "types": ["jquery"]

5. 然后使用jquery著名的$变量

6. 享受

jsconfig.app.json file content

更新

如果您使用的是 scss，则将引导程序 scss 文件导入样式数组而不是 css 文件。

在样式数组下的 angular.json 文件中导入引导 scss 文件 node_modules/bootstrap/scss/bootstrap.scss

Answer 2

Angular 组件是动态创建的，因此在页面加载时对元素执行操作的任何脚本在 Angular 模板中使用时都不会自动执行任何操作。

稍微搜索一下，你会发现在 Angular 上使用 Bootstrap 的库，例如：https://ng-bootstrap.github.io