Angular 应用程序中的引导程序 5

Posted 2023-05-08

技术标签:

【中文标题】Angular 应用程序中的引导程序 5【英文标题】：Bootstrap 5 in Angular Application 【发布时间】：2021-09-05 21:45:54 【问题描述】：

自第 5 版起，Bootstrap 框架已将 jQuery 作为一项要求移除。

我想知道此更改如何影响 Angular 应用程序？

我们可以在 Angular 中使用所有提供的 Bootstrap 功能（例如下拉菜单）吗？

我知道 Angular 不应该与 JQuery 结合使用 - 在 Bootstrap 的早期版本中，如果我们想使用所有引导程序功能，建议导入 JQuery，这很糟糕。

但是 Bootstrap 5 不再依赖于 JQuery，所以在我的 Angular 应用程序中使用它是否安全？

目前我不想使用像 ng-bootstrap 这样的引导替代品，这就是为什么我要问在 Angular 中使用 Bootstrap 5 是否可以且安全？

【问题讨论】：

【参考方案1】：

安装引导程序只需使用

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
        ]

【讨论】：

这成功了！重要提示：您必须重新启动编译器（ng serve）才能使 angular.js 中的更改生效。【参考方案2】：

是的，您现在可以使用它。您可以通过 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 依赖的情况下实现 Bootstrap 的方法。所以现在，Bootstrap 删除了 JQuery。是不是意味着 ng-bootstrap 现在没有意义了？实际上，ng-bootstrap 被设计为在没有 jquery 的情况下工作，因此用户可以在没有 jquery 的情况下使用它。但是现在没有 jquery 本身就可以使用 bootstrap。所以这完全取决于你自己选择哪种方法。 @LovekeshKumar，建议您安装引导程序并更改 angular.json 文件【参考方案3】：