前言
作为前端开发人员，我们经常需要使用各种第三方库来提高自己的工作效率。而在这其中，npm（Node Package Manager）是最常见的一个包管理工具。通过 npm 包，我们可以快速的安装、更新、卸载各种库。
ngx-bootstrap-accessible 就是这样一个非常实用的 npm 包。它提供了一套基于 Bootstrap 的可访问性组件，让我们可以省去重复造轮子的时间，轻松打造符合无障碍要求的页面。
在本篇文章中，我们将为大家介绍如何使用 ngx-bootstrap-accessible 。
安装
打开终端并输入以下命令：
npm i ngx-bootstrap-accessible bootstrap @ng-bootstrap/ng-bootstrap
这个命令会安装 ngx-bootstrap-accessible、Bootstrap、以及 NgBootstrap（Angular 中使用的 Bootstrap 组件）。
集成
在 app.module.ts 文件中，添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - --------- - ---- -----------------------------
------ - ---------------------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- --------------------------------
------ - ------------- - ---- ------------------------
------ - ---------------- - ---- ------------------------------
------ - ------------------ - ---- ------------------------------------
-----------
------------- -
-------------
-----------------
--------------
-----------------
------------------
--
-------- -
------------------------------------ ------ ------------------ ---
-----------------
------------
----------------------
- ----- --- ---------- -------------- ---------- ------ --
- ----- ---------- ---------- ---------------- --
- ----- ------------- ---------- ------------------ --
---
----------
--------------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这个代码会将 ngx-bootstrap-accessible、Bootstrap、以及 NgBootstrap 集成到我们的项目中。
使用
在页面中使用 ngx-bootstrap-accessible 的组件非常简单。例如，我们要使用官方文档中演示的 buttons 组件，只需要在代码中加入以下 HTML 代码：
<button type="button" class="btn btn-success">Success</button>
这行代码就可以展示一个绿色的按钮。也可以使用 Bootstrap 提供的其他按钮样式。更多的样式可以在 Bootstrap 的官方文档中查看。
可访问性
ngx-bootstrap-accessible 提供的组件都是符合 Web Content Accessibility Guidelines (WCAG) 的。因此使用 ngx-bootstrap-accessible 打造出的页面，在可访问性上也符合相关要求。这点对于一些需要关注无障碍的项目尤为重要。
示例代码
以下是一个简单的组件，展示了 ngx-bootstrap-accessible 的 button、alert、以及添加键盘事件监听的示例代码。
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------------
--------- -----------------
--------- -
-------
-------------
---------- ------------
-------------------
-----------------------------
-------------------------
-------------------------------
-------------------------------
--------------------------
-
-- ----- --
---------
---- ---------------------
---- ------------ -------------- -------------
---- -- ---- - ----- ------- -- --- -----
------
------
-
--
------ ----- ------------------ -
-------- ------ -------
-------- --------- --------
-------- --------- -------
-------- --------- --------
--------- ------- - --- ---------------
---------------- -------------- -
-- ---------- --- - - -- --------- --- -------- -
-----------------------
---------------
-
-
--------- -
-- ---------------- -
--------------------
-
-
-结论
本文通过介绍 ngx-bootstrap-accessible 的安装、集成、使用，以及符合 WCAG 的可访问性，向大家展示了这个 npm 包非常实用的一面。希望能对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc39