什么是 AngularTS-Wizard
AngularTS-Wizard 是一个基于 AngularJS 和 TypeScript 的轻量级向导组件库，能够帮助您快速构建可定制的、交互式的向导形式的应用程序。当然，它也包含一些高级功能，如向导配置、表单验证、自定义表单控件以及向导步骤管理等。
安装
要使用 AngularTS-Wizard，您首先需要在项目目录下安装它：
npm install angularts-wizard --save
然后，在您的应用程序中引用包：
import { WizardModule } from 'angularts-wizard';最后，在您的 Angular 模块中注册 WizardModule：
-- -------------------- ---- -------
-----------
-------- -
------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -使用
在你的 html 模板中，您可以这样使用组件：
-- -------------------- ---- -------
-----------
--------------- --------------- ---
---- ---- - ------- ---
-----------------
--------------- --------------- ---
---- ---- - ------- ---
-----------------
--------------- --------------- ---
---- ---- - ------- ---
-----------------
------------这里的每个 ts-wizard-step 就是您爱的向导的每个步骤。除了 "stepTitle"，它还可以设置其它属性，如 "isComplete"、"isValid" 和 "allowJump".
除了步骤外，您还可以在 ts-wizard 上设置许多属性（如控制按钮是否显示、点击按钮事件处理等）。
示例代码
以下是一个魔兽世界注册表单的完整示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------------
---------------- -----------
---------- ---------------------------------------
--------------- ----------------- ---- -------- ----------------------------------
----- ---------------------
---- -------------------
------ -------------------------------
------ ----------- ------------- --------------- ------------------ --------- -------------------- ---------------------------------- ---------
------
---- -------------------
------ -------------------------------
------ --------------- ------------- --------------- ------------------ --------- -------------------- ---------------------------------- ---------
------
------- ---------- ------------ ----------------------------------- -----------------------------------------------------------
-------
-----------------
--------------- ------------------- ------------ ----------------------------------
----- ---------------------
---- -------------------
------ --------------------- ------------
------ ----------- -------------- ---------------- ------------------ ----- ----- -------------------- ----------------------------------- ---------
------
---- -------------------
------ ------------------- ------------
------ ----------- ------------- --------------- ------------------ ---- ----- -------------------- ---------------------------------- ---------
------
------- ---------- ------------ ----------------------------------- ------------------------------
-------
-----------------
--------------- ------------------ ---- ------ ----------------------------------
----- ---------------------
---- -------------------
------ -------------------------
------ ------------ ---------- ------------ ------------------ ------ -------------------- ------------------------------- ---------
------
------- ---------- ------------ ----------------------------------- ------------------------------
-------
-----------------
--------------- ---------------- --------------
-------- --- --- ------- --- ------------------------- -----------------------------
----- ---- ---- - ------------ ----- -- --------------------------
-----------------
------------
------
-
--
------ ----- ------------ -
----------- - -
-------- --
--------- ---
--------- ---
---------- ---
--------- ---
------ --
--
-------------------- -
------------------------
-- ----- -------- ----
------------
-
------ -
---------------------------
-
-以上是一个简单易懂的注册表单的示例。当您引入 angularts-wizard npm 包后，您可以轻松地使用高可用的 AngularTS-Wizard 组件库来设计您的项目目录中的最新型向导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671281e8991b448e35c8