前言
随着 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