在前端开发中，经常会用到下拉框组件。但是原生的下拉框外观简单，无法满足我们的需求。这时候，第三方的下拉框组件就显得尤为重要了。其中，ng5-select2-ex是一款基于Angular5的下拉框组件，使用简单、功能强大，是我们前端开发中的好帮手。下面，我们就来学习一下如何使用ng5-select2-ex。
安装
使用ng5-select2-ex需要先安装它：
npm install ng5-select2-ex --save
使用
使用ng5-select2-ex需要在你的module中引入它：
import { Ng5Select2ExModule } from 'ng5-select2-ex';
@NgModule({
imports: [ Ng5Select2ExModule ],
...
})
export class AppModule { }接下来，在你的组件中使用ng5-select2-ex。例如，我们需要使用ng5-select2-ex生成一个城市列表：
<ng5-select2-ex (valueChanged)="onChange($event)">
<option [value]="'shanghai'">上海</option>
<option [value]="'beijing'">北京</option>
<option [value]="'guangzhou'">广州</option>
<option [value]="'shenzhen'">深圳</option>
</ng5-select2-ex>我们可以通过valueChanged事件获取选中的值，并在onChange事件中处理。例如，我们可以在控制台输出选中的值：
onChange(selectedValue: any) {
console.log(selectedValue);
}参数
ng5-select2-ex提供了丰富的参数供我们自定义下拉框的样式和功能。
data
data参数用于指定下拉框中的选项，可以是一个数组，也可以是一个Observable对象。
data: Array<any> | Observable<any[]>
multiple
multiple参数用于指定是否多选。如果是多选，则返回的值为一个数组。
multiple: boolean
placeholder
placeholder参数用于指定下拉框的提示语，当未选中任何选项时显示。
placeholder: string
width
width参数用于指定下拉框的宽度。
width: string
allowClear
allowClear参数用于指定是否允许清空选项。
allowClear: boolean
disabled
disabled参数用于指定下拉框是否可用。
disabled: boolean
minimumInputLength
minimumInputLength参数用于指定最小输入长度。这是一个异步操作，我们可以在返回的Observable对象中指定下拉框中的选项。
minimumInputLength: number
ajax
ajax参数用于指定使用异步加载选项。这也是一个异步操作，我们可以在返回的Observable对象中指定下拉框中的选项。需要注意的是，如果使用了ajax参数，则不能使用data参数。
-- -------------------- ---- -------
----- -
---- -------
--------- -------
------ -------
--------------- ------ ---- -- -
------ -
-------- ----
--
-
-总结
ng5-select2-ex是一款非常好用的下拉框组件，使用简单、功能丰富。通过本文的介绍，我们学会了如何使用ng5-select2-ex以及如何自定义它的样式和功能。在我们的实际开发过程中，ng5-select2-ex也会为我们提供极大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b2a