前言
现在，越来越多的前端开发者开始使用组件化开发的思想，这样可维护性更好，代码的重用性更高。随着前端框架的发展，现在也有越来越多的前端框架提供了自己的组件解决方案。而 orihoch-budgetkey-ng2-components 就是一个基于 Angular2 构建的组件库。在本文中，我们将详细介绍使用 orihoch-budgetkey-ng2-components 的方法。
安装和引入 orihoch-budgetkey-ng2-components
orihoch-budgetkey-ng2-components 是一个基于 NPM 的包，安装方法如下：
npm install --save orihoch-budgetkey-ng2-components
在你的项目中引入该包：
import {ComponentName} from 'orihoch-budgetkey-ng2-components';其中 ComponentName 是组件名称，需要根据具体组件进行替换。
组件使用方法
使用 orihoch-budgetkey-ng2-components 组件的方法非常简单。你只需要在你的 template 中加入该组件，在你的 controller 中注入该组件。比如，我们选择一个组件 abcd。在 template 中加入该组件：
<abcd></abcd>
然后，在你的 controller 中注入该组件：
import {ComponentName} from 'orihoch-budgetkey-ng2-components';
...
constructor( private abc:ComponentName ){ }
...示例代码
下面给出一个完整的使用示例代码。首先，我们需要在 template 中引入 orihoch-budgetkey-ng2-components 的一个组件 horizontal-bar-chart。然后，在我们的 controller 中注入该组件：
<horizontal-bar-chart></horizontal-bar-chart>
-- -------------------- ---- -------
------ ----------- ------- ---- ----------------
------ -------------------- ---- -----------------------------------
------ -------------- ---- -------------------
------------
--------- ---------
------------ ---------------------
----------- --------------------
--
------ ----- ------------ ---------- ------ -
------ ------------- ---------------
------------- -
----------------- - -
------- ---- ------ ----
------- ---- ------ ----
------- ---- ------ ----
------- ---- ------ ----
------- ---- ------ ----
------- ---- ------ ---
--
-
---------- -
-
-这样，一个简单的 horizontal-bar-chart 组件就被添加到了我们的应用中。
总结
orihoch-budgetkey-ng2-components 提供了很多优秀的组件功能，方便了前端开发者的开发工作。本文介绍了 orihoch-budgetkey-ng2-components 的安装和引入方法，并且提供了一个使用示例。希望本文能够帮助到正在使用这个库的开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e981e8991b448e0967
