自第 5 版起，Bootstrap 框架已将 jQuery 作为一项要求移除。
我想知道此更改如何影响 Angular 应用程序？
我们可以在 Angular 中使用所有提供的 Bootstrap 功能（例如下拉菜单）吗？
我知道 Angular 不应该与 JQuery 结合使用 - 在 Bootstrap 的早期版本中，如果我们想使用所有引导程序功能，建议导入 JQuery，这很糟糕。
但是 Bootstrap 5 不再依赖于 JQuery，所以在我的 Angular 应用程序中使用它是否安全？
目前我不想使用像 ng-bootstrap 这样的引导替代品，这就是为什么我要问在 Angular 中使用 Bootstrap 5 是否可以且安全？
【问题讨论】：
标签： javascript jquery angular twitter-bootstrap bootstrap-5
安装引导程序只需使用
npm install bootstrap
并编辑 angular.json 文件
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css", //<--add this line
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" //<--and this line
]
【讨论】：
是的，您现在可以使用它。您可以通过 npm 安装以及在项目中包含 CDN 链接来使用它。
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
您还可以在此处检查 Angular 11 中引导程序 5 的实现。 - https://www.c-sharpcorner.com/article/add-bootstrap-5-in-angular-11/
【讨论】：
ng-bootstrap 被设计为在没有 jquery 的情况下工作，因此用户可以在没有 jquery 的情况下使用它。但是现在没有 jquery 本身就可以使用 bootstrap。所以这完全取决于你自己选择哪种方法。
然后，您可以使用 IDE 的终端在项目中安装 Bootstrap。在 Visual Studio 代码中，这可以通过单击 CTRL + ` 或转到查看菜单来调出。
然后使用以下命令在项目中安装 Bootstrap 5。
npm install bootstrap@next
然后您必须导入该包以便 Angular 知道它。为此，您可以在 Angular.json 文件中添加必要的指令。
然后将以下路径添加到 CSS。
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
以及下面的JS
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
使用以下 NPM 命令，您可以将 popper.js 添加到您的项目中。
npm install @popperjs/core
然后将指令添加到您的 angular.json 文件中
"./node_modules/@popperjs/core/dist/umd/popper.min.js"
让你的 angular.json 文件看起来像这样。
【讨论】：