angular2-wizard-mognedy 是一个基于 Angular 2 的向导组件，可以帮助开发者在 Web 应用中实现步骤导航的功能。其提供了多种形式的页面导航，包括单独显示或内嵌显示，跨组件导航等。本文将详细介绍 angular2-wizard-mognedy 的使用方法，以及给出示例代码作为参考。
安装
为方便使用，建议使用 npm 包管理工具进行安装。
npm install angular2-wizard-mognedy --save
集成
使用 angular2-wizard-mognedy 需要在项目中添加它的模块。
Step 1
在 app.module.ts 中导入 angular2-wizard-mognedy 模块。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
-- -- ----------------------- --
------ - ------------ - ---- --------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-- -- ----------------------- --
------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -Step 2
使用 ng-wizard 标签包裹导航条，使用 ng-wizard-step 标签包裹步骤页面。
-- -------------------- ---- -------
---- --- ---
-----------
---- ---- - ---
--------------- --------------- -- -------------------
---- ---- - --- ---
-----------------
---- ---- - ---
--------------- --------------- -- -------------------
---- ---- - --- ---
-----------------
---- ---- - ---
--------------- --------------- -- -------------------
---- ---- - --- ---
-----------------
------------Step 3
使用 app.component.ts 中的代码初始化向导组件。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- --------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- -------------- -------------- - -
---------- -
-- -------
------------------------------------- ---------
-
-API
ng-wizard
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navBar | boolean | true |
是否显示导航条 |
| navBarClass | string | 'wizard-tabs' |
导航条的 CSS 样式类 |
| showStepNumber | boolean | true |
是否在导航条上显示步骤编号 |
ng-wizard-step
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| stepTitle | string | '' |
步骤标题 |
| [stepId] | string | uuid() |
步骤 ID (如果不指定，则使用自动生成的 UUID) |
| [canEnter] | Function | null |
当用户尝试进入该步骤时要运行的函数 |
| [canExit] | Function | null |
当用户尝试离开该步骤时要运行的函数 |
示例
在 GitHub 上克隆本文的示例代码，并通过以下步骤安装依赖并运行项目。
-- -------------------- ---- ------- - ------- --- ----- ------------------------------------------------------- - ------- -- ---------------------------- - ---- --- ------- - ---- --- -----
打开浏览器，输入 http://localhost:4200 即可看到示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7e238a385564ab6ab5