什么是 Delon？
Delon 是一个由 NG-ZORRO 团队开发的企业级 Angular 应用基础件库，它包含了多个常用的 UI 组件和服务，以及一系列可复用的业务模块，旨在为开发者提供高效、简洁、易用的前端解决方案。
如何安装 Delon？
环境要求
在使用 Delon 之前，需要先安装好以下环境：
- Node.js （版本推荐 12.0 及以上）
- Angular CLI （版本推荐 12.0 及以上）
安装步骤
打开终端，进入你的项目目录。
使用以下命令安装 Delon：
--- ------- ------------ ---------- ------------ -----
其中，etc 表示 Delon 支持的其它组件库，具体可参考官方文档。
- 在 Angular 项目中导入所需的模块，例如：
------ - -------- - ---- ---------------- ------ - ----------- - ---- --------------- ----------- -------- -------------- -- ------ ----- --------- --
如何使用 Delon？
在安装好 Delon 和相应的模块之后，可以开始使用 Delon 提供的组件和服务了。下面以表单验证为例，演示 Delon 的使用方法。
使用步骤
- 在你的组件中导入所需的服务，例如：
------ - --------- - ---- ---------------- ------ - ------------ ---------- ---------- - ---- ----------------- ------ - ---------------- - ---- ------------------------ ------ - --------------- - ---- -------------
其中，FormBuilder 是 Angular 提供的一个用于构建表单的服务，NzMessageService 是 NG-ZORRO 提供的一个用于显示提示信息的服务，ReuseTabService 是 Delon 提供的一个用于缓存页面状态的服务。
- 在你的组件中定义表单模型，例如：
------------
--------- -----------
--------- -
----- ------- ------------------ --------------------------
--------------
-------------- ---------------------------------------
-----------------
------
--------
--------------------------
--------------------
--
------------------
---------------- --------------------------------- -- ---------------------------------------
------
------------------
---------------
--------------
-------------- --------------------------------------
-----------------
------
--------
--------------------------
-------------------
---------------
--
------------------
---------------- --------------------------------- -- ---------------------------------------
-----
------------------
---------------
--------------
-----------------
------- --------- ------------- ------------------------------------
------------------
---------------
-------
--
--
------ ----- ------------- -
----- ----------
---------- - ------
------------
------- --- ------------
------- -------- -----------------
------- ---------------- ----------------
- -
--------- - ---------------
--------- ------ ---------------------
--------- ------ ---------------------
---
-
------------ -
-- ----------------- -
--------------- - -----
-- ----------
-- ---------------------------- ----------------------------- -- -
-- --------------- - ------
-- -----------------------------
-- -----------------------------
-- ---
-
-
-其中，nz-form、nz-form-item、nz-form-label、nz-form-explain 和 nz-form-control 都是 NG-ZORRO 提供的 UI 组件，FormControl 是 Angular 提供的一个用于管理表单控件的类。
- 在你的组件的模板中使用表单控件，例如：
------ -------- -------------------------- -------------------- --
其中，formControlName 代表该表单控件对应的 FormControl 名称。
- 在你的组件中添加表单提交逻辑，例如：
------------ -
-- ----------------- -
--------------- - -----
-- ----------
---------------------------- ----------------------------- -- -
--------------- - ------
-----------------------------
-----------------------------
---
-
-结语
以上就是 Delon 的使用方法，相信你已经对 Delon 的用法有一定的了解了。如果你在使用中遇到了问题，可以参考 Delon 的官方文档进行查阅。Delon 还提供了一系列示例代码和详细的 API 文档，方便开发者更加灵活地使用该组件库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f8c238a385564ab6e77