前言
在前端开发中，我们经常需要对一些数据进行筛选和选择操作。这时候，一个好用的下拉选择框（select）就显得非常重要了。npm 包 eko-point-ng2-select 是一个基于 Angular2 的下拉选择框 UI 组件，主要特点包括：
- 响应式布局
- 支持多选和单选
- 支持过滤
- 支持自定义模板
如果您需要在自己的 Angular2 项目中使用一个强大的、易于集成的下拉选择框组件，那么 eko-point-ng2-select 绝对值得一试。
安装
您可以使用 npm 命令安装 eko-point-ng2-select，使用以下命令：
npm install eko-point-ng2-select --save
引入
要在你的项目中使用 eko-point-ng2-select，需要在你的模块文件中进行以下引入：
import { EkoPointNg2SelectModule } from 'eko-point-ng2-select';
@NgModule({
imports: [
EkoPointNg2SelectModule
],
})
export class YourAppModule { }然后，在你的组件中使用 eko-point-ng2-select 的标签，比如下面这样：
<eko-point-ng2-select [options]="options" [(ngModel)]="selected"> </eko-point-ng2-select>
API
Inputs
options
- 类型：
Array - 必填：是
设置下拉选择框的选项数据。每个选项应该是一个对象，格式如下：
{
id: '1',
text: 'Option 1'
}allowClear
- 类型：
boolean - 必填：否
- 默认：
false
设置是否允许清除已选择的项。
placeholder
- 类型：
string - 必填：否
设置下拉框未选择项时显示的提示信息。
multiple
- 类型：
boolean - 必填：否
- 默认：
false
设置是否支持多选。
Outputs
onSelect
当选择了一个或多个选项时触发。
onDeSelect
当取消选择一个或多个选项时触发。
方法
select(item)
选择指定的选项。
deselect(item)
取消选择指定的选项。
selectAll()
选择所有选项。
deselectAll()
取消选择所有选项。
toggleDropdown()
手动打开/关闭下拉框。
示例
下面是一个完整的示例代码，其中演示了使用 eko-point-ng2-select 实现选择商品分类的功能。
<eko-point-ng2-select [options]="categories"
[placeholder]="'请选择商品分类'"
[multiple]="true"
[(ngModel)]="selectedCategories"
(onSelect)="onCategorySelect($event)"
(onDeSelect)="onCategoryDeselect($event)">
</eko-point-ng2-select>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------------------
------------ ------------------------------------
--
------ ----- ------------------------- -
----------- ----- - ---
------------------- ----- - ---
------------- -
--------------- - -
- --- ---- ----- ---- --
- --- ---- ----- ---- --
- --- ---- ----- ---- --
- --- ---- ----- ---- --
- --- ---- ----- ---- -
--
-
---------------------- -
--------------------- ------
-
------------------------ -
---------------------- ------
-
-总结
使用 eko-point-ng2-select 可以轻松地实现Angular2项目中的下拉选择框组件。在使用的过程中，可以根据实际需求进行自定义配置，如设置是否允许清除已选择的项、设置提示信息以及支持多选等。除此之外，ekopoint-ng2-select 还有一些其他便民功能，如过滤和自定义模板。总之，使用 eko-point-ng2-select 会极大地方便我们的开发工作，是一款非常值得推荐的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb481e8991b448dc5e9