介绍
@codekeyz/ng-atmbank是一款专门为Angular6及以上版本开发的自定义组件库，它提供了一系列通用组件以及函数用于ATM银行web应用的开发。这个包包含了自定义的表单、表格、消息框和导航栏等组件，能够帮助开发者高效地建立ATM银行web应用。
安装
通过npm可安装@codekeyz/ng-atmbank，请在终端输入以下命令：
npm install @codekeyz/ng-atmbank --save
引入
将@codekeyz/ng-atmbank模块引入到所需模块中，例如：
-- -------------------- ---- ------- ------ - --------------- - ---- ----------------------- ----------- ------------- --------------- -------- --------------- ----------------- ---------- --- ---------- -------------- -- ------ ----- --------- - -
组件
@codekeyz/ng-atmbank提供了多种组件，包括：
atm-formATM表单组件，减少表单代码的编写。atm-tableATM表格组件，提供分页以及多种样式。atm-modalATM消息框组件，用于弹出提示框。atm-navbarATM导航栏组件，用于页面的导航。
ATM表单组件
atm-form组件被设计为一个高效表单解决方案，能够减少开发时间并优化用户体验。表单组件具备额外的验证逻辑，它更加适合ATM银行的应用场景。以下是使用示例：
<atm-form [formGroup]="formGroup" [fields]="fields" [buttonText]="'提交'" (submit)="submit()"> </atm-form>
参数说明：
formGroup：表单控制器对象，required。fields：表单字段实例组成的数组，required。buttonText：提交按钮的文本，默认为提交。submit：函数，处理表单提交事件。
ATM表格组件
atm-table组件提供了一个数据视图，支持排序、筛选、选择和更多特性。它提供了轻松交互，通过行操作和筛选数据等方式，优化了数据的显示。其使用示例代码如下：
<atm-table [data]="data" [fields]="fields" [pageSize]="10" [pageLength]="pageLength" (checked)="checked($event)" (page)="pageChanged($event)"> </atm-table>
参数说明：
data：表格显示的数据列表，required。fields：表格数据元数据数组，包括每个单元格的标头、类型、宽度、可排序等属性。pageSize：每页行数，可选。pageLength：数据总行数，required。checked：当行被选中了，此函数会被调用。pageChanged：当当前页面改变时，此函数会被调用。
ATM消息框组件
atm-modal组件是一款定制的消息提示框，用于在ATM银行应用中展示弹框式通知。使用示例如下：
<atm-modal [show]="showModal" [type]="type" [title]="title" [content]="content" (close)="closeModal()"> </atm-modal>
参数说明：
show：Boolean，决定消息框的显示与隐藏。type：消息框类型，可选'info'、'warning'、'error'。title：消息框标题，required。content：消息框展示内容，required。close：函数，处理关闭消息框事件。
ATM导航栏组件
atm-navbar组件提供了一个导航栏，优化了ATM银行应用的用户体验。使用示例如下：
<atm-navbar [menuState]="menuState" [menus]="menus" [navType]="'default'" (menuClicked)="onMenuClicked($event)"> </atm-navbar>
参数说明：
menuState：字符串，open或close，决定导航栏的显隐。menus：菜单数据数组，以及每个菜单项的展示文本、URL等信息。navType：导航栏类型，可选缺省类型为default。menuClicked：函数，处理菜单点击事件。
总结
以上就是使用@codekeyz/ng-atmbank的所有内容。我们深入剖析了四个核心组件，以及使用示例。在开发ATM银行web应用平台时，使用该npm包能够带来许多便利性，还能增加整体用户体验。愿这个教程能够对读者起到指导和启发作用。
示例代码
以下是使用@codekeyz/ng-atmbank进行表格开发的示例：
组件 HTML：
<atm-table [data]="tableData" [fields]="tableFields" [pageLength]="50" (checked)="onSelect($event)"> </atm-table>
组件 TS：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -----------------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------------- ----- ----------- - -
---------- ------
------------ ----------------
---------- -
---------------- - -
- ----- --------- ------- ----- ------ ----- --------- ---- --
- ----- --------- ------- ------- ------ ------- --------- ----- ------ ------- --
- ----- --------- ------- ---------- ------ ---------- --------- ----- ------ ------- --
- ----- --------- ------- --------- ------ --------- --------- ----- ------ ------ --
- ----- --------- ------- --------- ------ --------- --------- ----- ------ ------ --
- ----- ------- ------- ----- ------ ------ ----------- --------- ----- ------ ------- --
- ----- ------- ------- ------ ------ ------ ------------ --------- ----- ------ ------- --
- ----- ------- ------- ------- ------ ------ ------------- --------- ----- ------ ------- --
- ----- ---------- ------- ------------- ------ ------------ -
--
----------------------------------------------------------------------- ------ -- -
-------------- - -----
---
-
----------- ------ -
---------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36604