前言
ng2-adasia-common 是一个开源的 Angular 2+ 通用组件库，包含了常用的 UI 组件和工具函数，如固定表头表格、模态框、日期选择器等等。它的目标是帮助开发者快速搭建高质量的 Angular 应用，提升开发效率。
本教程将在介绍如何使用 ng2-adasia-common 这个 npm 包的同时，详细讲解它的使用方法和源码实现，希望读者能够更深入地了解这个组件库，并且能够在实际项目中应用它。
安装
使用 npm 可以很方便地安装 ng2-adasia-common ：
npm install ng2-adasia-common --save
用法
固定表头表格
固定表头表格是一个常用的 UI 组件，它可以在表格很长的时候保持表头一直可见，方便用户查看。ng2-adasia-common 提供了一种简单的解决方案，只需要加上 ad-fixed-table-header 属性即可。
-- -------------------- ---- -------
------ ----------------------
-------
----
-----------
-----------
-----------
-----------
-----------
-----
--------
-------
--- ----------- ------ -- --------
------ ----------- -------
------ ---------- -------
------ ------------- -------
------ ------------ -------
------ ------------ -------
-----
--------
--------这段代码会将表头固定在页面顶部，并且在滚动时保持可见。
模态框
模态框是一个常用的 UI 组件，它可以在当前页面上方弹出一个浮动框，用于显示一些需要用户进行操作的信息，比如确认操作或者提示消息等等。ng2-adasia-common 提供了一个 ModalService 服务，可以很方便地显示和隐藏模态框。
<button (click)="openModal()">打开模态框</button> <ng-template #modalContent> <div>这是一个模态框</div> </ng-template>
-- -------------------- ---- -------
------ - ---------- ---------- ----------- - ---- ----------------
------ - ------------ - ---- --------------------
------------
--------- -----------
--------- -
------- ------------------------------------
------------ --------------
------------------
--------------
-
--
------ ----- ------------ -
-------------------------- ------------- -----------------
------------------- ------------- ------------- --
----------- -
-----------------------------------------------
-
-这段代码会在点击按钮时弹出一个模态框，模态框的内容为 "#modalContent" 模板中的内容。
日期选择器
日期选择器是一个常用的 UI 组件，它可以帮助用户快速选择日期，ng2-adasia-common 提供了一个 DatepickerComponent 组件，可以很方便地实现日期选择器。
<adasia-datepicker [(ngModel)]="selectedDate"></adasia-datepicker>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------ -----------------------------------------------
-
--
------ ----- ------------ -
------------ - --- -------
-这段代码会在页面上生成一个日期选择器，用户可以选择日期，并且选择的结果会保存在 selectedDate 变量中。
实现细节
ng2-adasia-common 提供的组件和工具函数都经过了精心设计和实现，在这里简单介绍其中一些实现细节，希望读者能够更深入地了解它们。
固定表头表格
ng2-adasia-common 的固定表头表格是通过添加两个样式表来实现的，如下所示：
-- -------------------- ---- ------- ----- - --------- ------- ---- -- -------- -- ----------------- -------- - ----- - -------- ------ ----------- ----- ----------- ------ -
通过给表头添加 position: sticky; top: 0; 这些样式，可以实现表头固定在页面顶部；通过给 tbody 添加 display: block; 和 overflow-y: auto; 这些样式，可以使 tbody 滚动，并且高度不超过 max-height 属性指定的值。
模态框
ng2-adasia-common 的模态框是通过一个 Service 和一个 Component 来实现的。ModalService 服务负责显示和隐藏模态框，而 ModalComponent 组件负责展示模态框的内容，并且提供了一些事件回调来响应用户的操作。
-- -------------------- ---- -------
-------------
------ ----- ------------ -
------- ------------- ----------- - ------------------------------
------- ------------- -----------------------------
----------------------------- ------- --------- ---- ------- --------- ------------------------- --
------------------ ----------------- -------- ------------ -
----- ------------ - ------------------------------------------------------
----------------- - -----------------------------------
-- -------- -
----------------------------------------- --------
-
---------------------------------- - --------
----------------------------------------------- -- ------------------
--------------------------------------------------
-------------------------------------------
-
----------- -
----------------------------
------------------------------------------------------------
-
--- -------------------- ---- -------
------------
--------- ---------------
--------- -
---- --------------
---- ---------------------
---- ----------------------
---- ---------------------
--- ---------------------- ----- -------
------- ------------- ------------- ------------------ -------------------------
--------------------
---------
------
---- -------------------
------------- -------------------------------------------
------
---- ---------------------
------- ------------- ---------- -------------- ------------------------------------
------- ------------- ---------- ------------ --------------------------------------
------
------
------
------
--
---------- --------------------------
--
------ ----- -------------- ---------- ------ -
-------- ------ -------
-------- ------------------ ------- - -----
--------- -------- ----------------- - --- ---------------
--------- ---------- ----------------- - --- ---------------
----------------------- -------- -----------------
------------- --
---------- --
-上述代码就实现了 ng2-adasia-common 的模态框功能，它使用了 Angular 中的一些核心特性，比如动态组件、Injector、TemplateRef 等等。
日期选择器
ng2-adasia-common 的日期选择器是通过 ngx-bootstrap 这个库中的 BsDatepicker 组件来实现的。BsDatepicker 是一个强大的日期选择器组件，支持多种配置和事件回调，可以满足各种需求。
<input type="text" bsDatepicker [(bsValue)]="selectedDate" />
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ---------------------------
------------
--------- -----------
--------- -
------ ----------- ------------ -------------------------- --
--
---------- -- -------- ------------------- --------- - --------------- ----------- - --
--
------ ----- ------------ -
------------ - --- -------
-这段代码会在页面上生成一个日期选择器，用户可以选择日期，并且选择的结果会保存在 selectedDate 变量中。同时，我们还可以通过 providers 属性来修改日期选择器的默认配置。
总结
ng2-adasia-common 是一个优秀的通用组件库，它提供了许多常用的 UI 组件和工具函数，可以极大地提升 Angular 应用的开发效率。本教程介绍了 ng2-adasia-common 的安装、用法以及一些实现细节，希望读者通过阅读本文，能够更深入地了解 ng2-adasia-common 这个组件库，同时也能够在实际项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c081e8991b448e3103