介绍
ng2-multiselect 是一个 Angular2+ 的多选下拉框组件库,具有高度的可配置性和灵活性。 本文将介绍如何使用 ng2-multiselect 包,其中包括如何安装、配置以及代码示例。
安装
使用 ng2-multiselect 需要安装以下前提包:
- Angular ^2.0.0
- rxjs ^5.0.0
然后,可以通过 npm 安装 ng2-multiselect:
npm install ng2-multiselect --save
配置
ng2-multiselect 可以通过 @Input 和 @Output 两个装饰器来配置。以下是 ng2-multiselect 的配置项:
Input
- data: { id:number, name:string }[] - 显示的选项列表
- settings: MultiselectSettings - 多选框的设置
- texts: MultiselectTexts - 多选框的文字设置
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- --------------------- ----------------- - ---- ------------------ ------------ --------- ------ --------- - ------------------- ------------------------- - -- ------ ----- ------------ - -- ---- -- -- --------- -- ----------- ---------- --------------------- -- ----------- -------- ------ ----------- -------------------- - - ------------- ----- ------------- -------------- -------------- ---- ----------- --------------- --------------- -- -------------------- ----- ------------- ----- --------------- ----- ----------- ------ -- -- ----------- ---- -------- ------ -------- ----------------- - - --------- ------- ----- ----------- --------- ----- -------- ----- ---------- -------------- ------ ---------- ------------------ ------------ ------------- --------- -- ------------- - - -展开代码
Output
- onAdded: EventEmitter<any> - 添加选项时的输出
- onRemoved: EventEmitter<any> - 删除选项时的输出
- onOpened: EventEmitter<any> - 多选框打开时的输出
- onClosed: EventEmitter<any> - 多选框关闭时的输出
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- --------------------- ------------------ ------------------------ ----------------------- - ---- ------------------ ------------ --------- ------ --------- - ------------------- --- ----------------------------------------------------- - -- ------ ----- ------------ - --------- - ------ -- - ------------------ -- ------------- - - -展开代码
代码示例
<ng-multiselect [data]="myOptions" [settings]="mySettings" [texts]="myTexts" (onRemoved)="onRemoved($event)"></ng-multiselect>
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- --------------------- ------------------ ------------------------ ----------------------- - ---- ------------------ ------------ --------- ------ --------- - ------------------- ------------------ ----------------------- ----------------- ----------------------------------------------------- - -- ------ ----- ------------ - ---------- -------------------- - - - --- -- ----- ------- -- -- - --- -- ----- ------- -- -- -- ----------- -------------------- - - ------------- ----- ------------- -------------- -------------- ---- ----------- --------------- --------------- -- -------------------- ----- ------------- ----- --------------- ----- ----------- ------ -- -------- ----------------- - - --------- ------- ----- ----------- --------- ----- -------- ----- ---------- -------------- ------ ---------- ------------------ ------------ ------------- --------- -- --------- - ------ -- - ------------------ -- ------------- - - -展开代码
结论
ng2-multiselect 是一个非常灵活且易于使用的 Angular2+ 组件,它提供了高度的可配置性,可以轻松地创建一个美观、功能强大的多选下拉框组件。本文介绍了 ng2-multiselect 的安装以及配置方法,同时提供了一个代码示例,希望对您有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055aac81e8991b448d83c8