Angular如何引用JQuery和bootstrap类库

关注

原创最新推荐文章于 2026-06-17 08:13:06 发布 549 阅读 AI 写同款· GEO 优化 ›

Angular项目中正确集成ng-bootstrap的完整指南 Bootstrap 是广泛使用的前端 CSS 框架，但其原生 JavaScript 行为与 Angular 的组件化、声明式 DOM 操作机制存在根本冲突；直接引入 bootstrap.min.css 和 bundle.js 会导致变更检测异常、SSR 崩溃、样式隔离失效等典型问题。ng-bootstrap 并非 UI 库竞品，而是将 Bootstrap 交互范式‘翻译’为 Angular 原生组件的技术方案：所有模态框、弹出层、日期选择器均基于 @Input/@Output、Renderer2 和生命周期阅读详情

步骤说明

<1>新建终端。

首先新建一个终端，定位到你的Angular文件目录。

<2>在上述位置分别输入每一行的安装命令执行。这里除了添加jquery和bootstrap文件,还需要添加他们的描述文件。总共需要添加的代码如下。

npm install jquery --save
npm install bootstrap --save
npm install @types/bootstrap --save-dev
npm install @types/jquery --save-dev

<3>对照：上述步骤并没有引用完成，这时我们可以使用jquery或者bootstrap写两句代码看看效果。虽然您不知道我具体设计为何样，但是从这布局来看，可以断定，jquery没有起作用。

<4> 关键一步！请打开你src目录下的index.html文件。找到<body>标签，在<body>标签中<app-root>标签的后面添加如下代码！

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<5>我们再来刷新下刚才的网页。到此，才算引用成功。