NPM 包 orihoch-budgetkey-ng2-components 使用教程

阅读时长 4 分钟读完

前言

现在,越来越多的前端开发者开始使用组件化开发的思想,这样可维护性更好,代码的重用性更高。随着前端框架的发展,现在也有越来越多的前端框架提供了自己的组件解决方案。而 orihoch-budgetkey-ng2-components 就是一个基于 Angular2 构建的组件库。在本文中,我们将详细介绍使用 orihoch-budgetkey-ng2-components 的方法。

安装和引入 orihoch-budgetkey-ng2-components

orihoch-budgetkey-ng2-components 是一个基于 NPM 的包,安装方法如下:

在你的项目中引入该包:

其中 ComponentName 是组件名称,需要根据具体组件进行替换。

组件使用方法

使用 orihoch-budgetkey-ng2-components 组件的方法非常简单。你只需要在你的 template 中加入该组件,在你的 controller 中注入该组件。比如,我们选择一个组件 abcd。在 template 中加入该组件:

然后,在你的 controller 中注入该组件:

示例代码

下面给出一个完整的使用示例代码。首先,我们需要在 template 中引入 orihoch-budgetkey-ng2-components 的一个组件 horizontal-bar-chart。然后,在我们的 controller 中注入该组件:

-- -------------------- ---- -------
------ ----------- ------- ---- ----------------
------ -------------------- ---- -----------------------------------
------ -------------- ---- -------------------
------------
  --------- ---------
  ------------ ---------------------
  ----------- --------------------
--
------ ----- ------------ ---------- ------ -
  ------ ------------- ---------------
  ------------- -
    ----------------- - -
      ------- ---- ------ ----
      ------- ---- ------ ----
      ------- ---- ------ ----
      ------- ---- ------ ----
      ------- ---- ------ ----
      ------- ---- ------ ---
    --
  -
  ---------- -
  -
-

这样,一个简单的 horizontal-bar-chart 组件就被添加到了我们的应用中。

总结

orihoch-budgetkey-ng2-components 提供了很多优秀的组件功能,方便了前端开发者的开发工作。本文介绍了 orihoch-budgetkey-ng2-components 的安装和引入方法,并且提供了一个使用示例。希望本文能够帮助到正在使用这个库的开发者。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600562e981e8991b448e0967

纠错
反馈