前言
在WEB应用程序开发中，下拉菜单是常用的交互组件之一。而Angular框架是目前最流行的前端框架之一，其官方库中也提供了下拉菜单组件，但是使用起来比较麻烦。为了方便开发者快速集成下拉菜单组件，有开发者写了类库angular-2-dropdown，本文将介绍该类库的使用方法。
安装
在你的项目中使用angular-2-dropdown组件库，需要先安装该npm包。打开命令行终端，切换到项目根目录，执行如下命令：
npm install angular-2-dropdown --save
等待安装完成后，你就可以在自己的项目中使用该组件库了。
使用
本文将采用Angular CLI创建的工程作为演示项目。
导入模块
首先，需要在app.module.ts文件中导入该组件库的模块。
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------
-----------
-------- -
--------------
--------------- -- ---------------------
------------
----------
--
------------- -
------------
--
---------- ---------------
---------- --
--
------ ----- --------- - -在模板中使用
然后，在app.component.html文件中，添加下面的HTML代码：
<evo-dropdown [items]="items" [selectedItem]="selectedItem" [placeholder]="'Select an item'" (selectedItemChange)="onItemChange($event)"></evo-dropdown>
这个evo-dropdown标签就是angular-2-dropdown组件库的下拉菜单组件。其中，我们需要设置组件的属性：
items：下拉菜单的选项，一个数组对象selectedItem：默认选择的选项，一个对象placeholder：下拉菜单的默认提示文字，字符串类型selectedItemChange：当下拉菜单选择项变化时的回调函数
在组件中处理回调
为了让组件正常工作，还需要在app.component.ts文件中添加下列代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - -
-
--- --
----- ----- --
--
-
--- --
----- ----- --
--
-
--- --
----- ----- --
-
--
------------ - --------------
------------------ -
------------------
-
-这里，我们定义了下拉菜单的选项，初始选择的是第一个选项。当选择项发生变化时，将调用onItemChange方法并输出到控制台中。
示例代码
最终的演示项目代码，可以在下列GitHub仓库中找到：
总结
angular-2-dropdown组件库是一个方便使用的下拉菜单组件库，可供Angular框架中的开发者使用。通过本文的介绍，你应该可以学会如何集成并使用该组件库。为了更好的应用该组件库，也需要对Angular的一些基础知识有一定的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2fc2