npm 包 angular2-wizard-fix 使用教程

阅读时长 5 分钟读完

前言

随着 Angular 的发展,开发中使用了越来越多的第三方库和插件。其中,一些库是为了解决具体问题而设计的,比如遇到一个表单需要分步骤填写,我们可以使用 angular-wizard 这个库。然而,这个库自从 Angular 升级之后,就没再维护了,一些 bug 也被反映。所以我们可以使用 angular2-wizard-fix 来解决问题。下面让我们来看一下该库的使用方法。

安装

首先,你需要在你的项目中安装该库。我们可以在命令行中使用以下命令来安装:

使用

该库的使用比较简单,下面我们来详细讲解一下。

导入

首先,在你的 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

纠错
反馈

纠错反馈