介绍
在使用 Angular 框架进行应用开发时，经常需要使用一些 UI 组件来构建页面，比如按钮、表单、模态框等等。而 @mattlewis92/ng-bootstrap 就是一个可以帮助我们快速开发这些组件的 npm 包。它是基于 Bootstrap 的 CSS 框架和 Angular 的组件化开发理念，提供了丰富的 UI 组件供我们使用。
安装
在使用 @mattlewis92/ng-bootstrap 前，我们需要先安装它。可以通过 npm 进行安装：
--- ------- ------ --------------------------
同时，我们还需要在 Angular 的模块中导入 @ng-bootstrap/ng-bootstrap 模块：
------ - --------- - ---- ----------------------------- ----------- -------- ------------ --- -- ------ ----- --------- - -
这样我们就可以在应用中使用 @mattlewis92/ng-bootstrap 提供的组件了。
使用
模态框
模态框（Modal）是我们构建交互页面中经常使用的一个组件，它可以帮助我们展示一些提示信息或者表单等等，并且阻止用户继续与页面交互。下面我们来看一下如何使用 @mattlewis92/ng-bootstrap 提供的模态框组件。
创建模态框组件
首先，我们需要创建一个组件来展示我们的模态框。可以使用 Angular CLI 的命令来快速生成一个基本的组件：
-- -------- --------- --------
这个命令会新建一个目录 my-modal，其中包含了一个组件文件 my-modal.component.ts 和一个 HTML 模板文件 my-modal.component.html。
在 my-modal.component.ts 文件中，我们需要导入 NgbActiveModal 和 Component，同时通过 @Component 装饰器来定义组件元数据：
------ - --------- - ---- ---------------- ------ - -------------- - ---- ----------------------------- ------------ --------- --------------- ------------ ---------------------------- ---------- ----------------------------- -- ------ ----- ---------------- - ------------------ ------------ --------------- - - -
在组件中，我们传入了一个 NgbActiveModal 对象，它是一个 ng-bootstrap 提供的模态框服务，我们可以通过它来控制模态框的行为。
在模板中渲染模态框内容
在 my-modal.component.html 文件中，我们需要填充我们的模态框内容。可以按照以下方式填充：
---- ---------------------
--- ------------------------------
------- ------------- ------------- ------------------ ----------------------------------- ---------
----- ---------------------------------
---------
------
---- -------------------
-----
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------- --------------------
------这是一个基本的模态框结构。模态框的标题、内容和底部按钮都可以根据我们的需求进行定制化。同时，我们可以通过 activeModal 对象来控制模态框的关闭动作。
在组件中打开模态框
完成了模态框的基本结构后，我们需要在我们的应用中调用它，展示出来。这里我们可以通过组件的 ViewChild 属性来访问到我们的 my-modal 组件，然后调用它的 open 方法即可：
------ - ---------- --------- - ---- ----------------
------ - -------- - ---- -----------------------------
------ - ---------------- - ---- --------------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----------------------------
------- --------- -----------------
------------------- ------------- --------- - -
----------- -
-------------------------------------
-
-日期选择器
自定义输入日期的表单控件是应用经常用到的一个功能。而 @mattlewis92/ng-bootstrap 提供了一个日期选择器（Datepicker）组件，可以帮助我们快速构建这样的控件。
在模板中使用组件
在模板中调用日期选择器的方式非常类似于普通的表单控件。我们可以使用 ngb-datepicker-input 指令来构建一个带有日期选择器的输入框：
------ -------------------- ------------------------
--------- ------------------ -------------
-------------------
------- ---------- --------------------- ---------------- ---------------------
-- --------- -----------------
---------其中，ngbDatepicker 是 @mattlewis92/ng-bootstrap 提供的一个指令，用于将日期选择器和输入框绑定在一起，同时 #d="ngbDatepicker" 也是必须的。在组件中，我们可以使用 NgbDateStruct 对象来存储日期，可以这样定义一个 date 变量：
------ - ------------- - ---- ----------------------------- ----- --------------
在应用初始化时，我们可以给 date 变量一个默认值，如今天的日期：
----- ----- - --- ------- --------- - - ----- -------------------- ------ ---------------- - -- ---- --------------- --
格式化日期
在实际使用中，我们可能需要将日期变量转换为特定的格式，以便在后端进行处理。可以使用 NgbDateParserFormatter 服务来格式化日期。我们可以在组件中定义一个变量来引入 NgbDateParserFormatter：
------ - ---------------------- - ---- ----------------------------- ------------------- ----------------------- ----------------------- - -
其中，在调用服务时，我们一般需要在 ngOnInit 生命周期钩子函数中进行。我们可以这样来实现日期格式化：
------ - ----------------------- ------------- - ---- ----------------------------- ------------------- ----------------------- ----------------------- -- ------ ---------------- --------------- ------ - ------ ----------------------------------------- -
这里的 formatDate 方法接收一个 NgbDateStruct 对象，并返回一个 string 类型的日期字符串。格式化的具体细节可以进一步定制化。
总结
通过本文的介绍，我们了解了 @mattlewis92/ng-bootstrap 这个 npm 包的基本使用方式。同时我们以模态框和日期选择器为例，介绍了在应用开发中如何使用这个包提供的组件。希望本文对于大家在学习和使用 Angular 和 ng-bootstrap 方面有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcb967216659e244710