现在在编写现代 Web 应用时，使用前端框架是必不可少的选择。在这些框架中，Bootstrap 被广泛使用并且被认为是最流行的 CSS 框架之一。在这篇文章中，我们将会学习使用最新的 Bootstrap-Schematics 作为包，来在 Angular 应用中轻松集成 Bootstrap。
Bootstrap-Schematics 简介
Bootstrap-Schematics 是一个官方发布的 npm 包，它提供了一组 schematics，可以自动生成符合 Bootstrap 要求的 Angular 组件。这意味着，我们可以很容易地在 Angular 项目中使用 Bootstrap，而无需手动创建组件、修改样式等等。
安装 Bootstrap-Schematics
首先，我们需要全局安装 @angular/cli。在命令行中执行以下命令：
npm install -g @angular/cli
然后，我们需要创建一个新的 Angular 项目。
ng new myapp
接下来，我们可以在项目目录下执行以下命令来安装 bootstrap 和 ngx-bootstrap：
npm install --save bootstrap ngx-bootstrap
最后，我们可以安装 bootstrap-schematics。
npm install --save-dev bootstrap-schematics
使用 Bootstrap-Schematics
一旦我们安装了 Bootstrap-Schematics，我们可以使用 ng generate 命令来生成符合 Bootstrap 标准的 Angular 组件。让我们来看一个例子：假设我们想要创建一个包含一个导航栏的组件。
ng generate bootstrap-schematics:nav my-nav
这将生成一个名为 my-nav 的组件，并在其中包含一个导航栏。与传统手动编写样式表和 HTML 代码相比，使用 bootstrap-schematics 几乎不需要编写任何代码。
接下来，我们需要在 app.module.ts 中导入 ngx-bootstrap。
-- -------------------- ---- -------
------ - ----------- - ---- ----------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- -------------------------
------ - -------------- - ---- -------------------------
------ - ---------------- - ---- ---------------------------
------ - ---------------- - ---- -------------------------
------ - ----------- - ---- ----------------------
------ - ---------------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
------ - ----------------- - ---- ----------------------------
------ - ------------ - ---- -----------------------
------ - ---------- - ---- ---------------------
------ - ---------------- - ---- ---------------------------
------ - ------------- - ---- ------------------------
------ - --------------- - ---- --------------------------
-----------
-------- -
----------------------
------------------------
-------------------------
-------------------------
---------------------------
---------------------------
----------------------
---------------------------
------------------------
----------------------------
-----------------------
---------------------
---------------------------
------------------------
-------------------------
-
--
------ ----- --------- - -在这些模块中，我们可以使用不同的指令和组件，这使得在 Angular 中使用 Bootstrap 更加容易。
结论
通过使用 Bootstrap-Schematics，我们可以使用 Angular 来集成 Bootstrap，而无需手动创建一个符合 Bootstrap 标准的组件。这对于任何具有 Angular 经验的人来说是一个重要的进步，并且可以节省项目的时间和开发成本。同时，使用 ngx-bootstrap 模块可以进一步加速我们在 Angular 中使用 Bootstrap 的速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5a81e8991b448ebdae