前言
随着 Angular 的发展，开发中使用了越来越多的第三方库和插件。其中，一些库是为了解决具体问题而设计的，比如遇到一个表单需要分步骤填写，我们可以使用 angular-wizard 这个库。然而，这个库自从 Angular 升级之后，就没再维护了，一些 bug 也被反映。所以我们可以使用 angular2-wizard-fix 来解决问题。下面让我们来看一下该库的使用方法。
安装
首先，你需要在你的项目中安装该库。我们可以在命令行中使用以下命令来安装：
npm install angular2-wizard-fix --save
使用
该库的使用比较简单，下面我们来详细讲解一下。
导入
首先，在你的 module 中，我们需要导入 WizardModule：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ---------------------- ----------- ------------- - ------------ -- -------- - -------------- ------------ -- -- ------------ -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
使用
在组件中，我们需要初始化 wizard，调用 wizard(elem, options) 方法即可。elem 参数是 HTMLElement 类型的元素，表示要将 wizard 渲染到哪个元素下；options 是 object 类型，表示 wizard 的配置信息。具体配置项可参考 angular2-wizard-fix 的文档。
对于下面这个简单的分步表单示例：
-- -------------------- ---- ------- ------ ----- ------ --------------------------- ------ ----------- ------------- ---------------- ------ ----- ------ -------------------------- ------ --------------- ------------- ---------------- ------ ----- ------ ------------------------------------ ------ --------------- --------------------- ------------------------ ------ ----- ------ ----------------------- ------ ------------ ---------- ------------- ------ -------展开代码
我们可以这样写：
-- -------------------- ---- ------- ------ - ---------- ----------- ------------- - ---- ---------------- ------ - -- ------ ---- ---------------------- ------------ --------- ----------- --------- - ---- -------------- - -- ------ ----- ------------ ---------- ------------- - ------- -------------- ------------------- --- ----------- -- ----------------- - ----- ------------- - ----------------------------------------------- ----------- - --------------------- - --------------- ----- ------- ----------------------- --------- ------------------------ --- - -------- - ------ ----- - ---------- - ----------------------- - -展开代码
上面就是一个简单的分步表单示例。
总结
angular2-wizard-fix 是一款 Angular 2+ 的第三方库，是对 angular-wizard 的改进。它的使用方法非常简单，只需要在 module 中导入 WizardModule，在组件中初始化 wizard 即可，而且支持自定义配置项。这个库对于一些需要分步骤填写的表单来说非常好用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583581e8991b448d5645
