在前端开发过程中，我们经常需要使用一些第三方库或框架来帮助我们加快开发速度，提高代码质量。npm 是一个非常常用的包管理工具，通过 npm，我们可以很方便地获取和使用各种开源的前端类库。
本文将介绍一个非常实用的 npm 包：microedge-skyux2-contrib。它是一组指令和组件，可以为你的 AngularJS2 应用程序提供帮助。
安装 microedge-skyux2-contrib
在使用 microedge-skyux2-contrib 之前，需要先将其安装到你的项目中。可以通过以下命令来从 npm registry 安装：
npm install microedge-skyux2-contrib --save
在安装过程中会提示你安装 Angular Material 2，这是因为 microedge-skyux2-contrib 中的一些组件需要它作为底层组件库。
使用 microedge-skyux2-contrib
安装完成后，你就可以在你的 Angular2 项目中使用 microedge-skyux2-contrib 了。在使用前，需要在你的 AppComponent 中引入 SKY UX 2 Bootstrapper：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ -
------------------
- ---- ------------------------------------------------
------------
--------- ---------
------------ ----------------------
--
------ ----- ------------ -
------ ------------
------------- ------------------
- -
------------------------
-- ---
---
-
-在你的模块中引入 microedge-skyux2-contrib 中的组件和指令：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ -
--------------
--------------
------------------------
------------------
----------------
---------------
------------------------
-------------
- ---- ----------------------------
------ - ----------- - ---- -----------------
-----------
------------- -
-----------
--
-------- -
-------------
------------
--------------
--------------
------------------------
------------------
----------------
---------------
------------------------
-------------
--
-------- -
-----------
-
--
------ ----- -------- - -这里我们只引入了一些比较常用的组件和指令，如果需要其他组件和指令，请参考官方文档。
microedge-skyux2-contrib 的组件和指令
下面我们将介绍 microedge-skyux2-contrib 中的一些组件和指令，并提供具体的使用示例。
sky-card
sky-card 是一个卡片组件，可以很方便地在你的应用中插入一些信息块，比如展示一条用户数据。使用 sky-card 非常简单，引入 sky-card 模块后，在模板中使用 sky-card 标签来定义一个卡片，然后在卡片中放入内容块即可：
-- -------------------- ---- -------
----------
----------------
---- -----------
-----------------
------------------
------- -------
-----------
----- ----- -------
-------------------
-----------------
------- ---------- --------------------------
------- ---------- ----------------- ------------
------------------
-----------sky-dropdown
sky-dropdown 是一个下拉框组件，可以很方便地用于表单选择框、菜单等场景。使用 sky-dropdown 非常简单，引入 sky-dropdown 模块后，在模板中使用 sky-dropdown 标签来定义一个下拉框，然后在下拉框中定义选项即可：
-- -------------------- ---- -------
--------------
------- ------------- -------------- ------------- ------------------
------
---------
-------------------
------------------------- ---------------------
------------------------- ---------------------
------------------------- ---------------------
--------------------
---------------sky-lookup
sky-lookup 是一个查询组件，可以很方便地在表单中插入自动补全查询框。使用 sky-lookup 非常简单，引入 sky-lookup 模块后，在模板中使用 sky-lookup 标签来定义一个查询框即可：
<sky-lookup debounce="500" (search)="onSearch($event)">
<sky-lookup-results>
<sky-lookup-result>Result 1</sky-lookup-result>
<sky-lookup-result>Result 2</sky-lookup-result>
<sky-lookup-result>Result 3</sky-lookup-result>
</sky-lookup-results>
</sky-lookup>sky-tile
sky-tile 是一个磁贴组件，可以很方便地用于创建一个磁贴菜单、图表等。使用 sky-tile 非常简单，引入 sky-tile 模块后，在模板中使用 sky-tile 标签来定义一个磁贴，然后在磁贴中插入内容块即可：
-- -------------------- ---- -------
----------
----------------
-- --------- ------------------
---------
-----------------
------------------
---
-------------------
-----------总结
通过本文，你学习了如何使用 microedge-skyux2-contrib 这个 npm 包。我们介绍了如何安装它、如何在 Angular2 中使用它，以及向你展示了其中几个组件和指令的使用示例。
microedge-skyux2-contrib 可以非常方便地帮助你构建更美观、更完善的 Angular2 应用程序。如果你需要一些方便实用的组件和指令，可以尝试这个包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fd3