介绍
ng2-archwizard 是一个 Angular2+ 的 npm 包，它提供了一种简单方便的界面向导组件，可帮助您快速开发多步骤表单。
该组件通过使用“步骤”和“步骤导航”来实现向导。每个步骤都可以是动态生成的，并允许您在每个步骤之间进行数据传递。
安装
使用 npm 安装 ng2-archwizard 包：
npm install ng2-archwizard --save
使用
- 首先，将 ArchwizardModule 导入 AppModule 中。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- -----------------
-----------
-------- -
--------------
----------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- -
-- 创建一个基本向导。
-- -------------------- ---- -------
-----------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- --------------- -------------
-----------------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- ----------------------- -------------
------- ------------- --------------- -------------
-----------------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- ----------------------- -------------
------- ------------- --------------- -------------
-----------------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- ----------------------- -------------
------- ------------- ----------------------------
-----------------
------------- 在控制器中定义步骤。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------
------------
--------- ---------
--------- -
-----------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- --------------------- -------------
-----------------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- ----------------------------- -------------
------- ------------- --------------------- -------------
-----------------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- ----------------------------- -------------
------- ------------- --------------------- -------------
-----------------
--------------- --------------- ---
---- - ------- ---- ---------- --
------- ------------- ----------------------------- -------------
------- ------------- ----------------------------------
-----------------
------------
-
--
------ ----- ------------ -
------ -
------------------
-
---------- -
----------------------
-
-------- -
--------------------
-
-示例
以下是一个完整的示例，它可以演示如何使用 ng2-archwizard 制作一个三步的向导。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------
------------
--------- ---------
--------- -
-----------
--------------- ------------------- ---------
------------ ------------
---- -------------------
------ --------------------- ------------
------ ----------- -------------------- ---------------
------
---- -------------------
------ ------------------- ------------
------ ----------- -------------------- --------------
------
------- ------------- --------------------- -------------
-----------------
--------------- ------------------ ---------
----------- ------------
---- -------------------
------ ----------------------- --------------
------ ----------- -------------------- -----------------
------
---- -------------------
------ -------------------------
------ ------------ -------------------- -----------
------
------- ------------- ----------------------------- -------------
------- ------------- --------------------- -------------
-----------------
--------------- -------------------------
---------- ------- ---- ------------
---------------- -------------- -----------------
--------------- -------------- ----------------
---------------- ---------------- -------------------
-------------------------- -------------
----- ---- ----------- ------------
------- ------------- ----------------------------- -------------
------- ------------- ----------------------------------
-----------------
------------
-
--
------ ----- ------------ -
--------- - ---
-------- - ---
----------- - ---
----- - ---
------ -
------------------
-
---------- -
----------------------
-
-------- -
--------------------
-
-总结
ng2-archwizard 是一个非常有用的工具，它能够快速、简单地制作多步骤表单的向导组件。本文介绍了如何安装和使用该组件，并提供了一个演示示例以供参考。有了该组件的帮助，您可以更轻松地设计和维护复杂的表单，同时也可以提高用户体验。如果您正在开发 Angular 2+ 应用程序，并需要实现向导功能，ng2-archwizard 值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564fd81e8991b448e198a