前言
ng2-select-hoveytech 是一个基于 Angular 2+ 开发的 UI 组件，用于构建选择型控件。本文将详细介绍该 npm 包的使用方法以及指导读者如何构建自己的选择型控件。方便读者快速掌握该组件的使用方式。
安装
使用该组件前，首先需要在项目中安装 ng2-select-hoveytech：
npm install ng2-select-hoveytech --save
引入
安装完成后，需要在项目中引入该组件：
import { Ng2SelectHoveytechModule } from 'ng2-select-hoveytech';
@NgModule({
imports: [
Ng2SelectHoveytechModule
]
})使用
在应用中，使用 ng2-select-hoveytech 组件需要在模板中添加以下 html 代码：
<free-select [(ngModel)]="yourModel"
[options]="options"
[placeholder]="'请选择 ' + yourLabel"
[multiple]="true"
[width]="400"
[searchable]="true"
[isClear]="true"
></free-select>说明
在上述代码中，使用的是 free-select 标签，因为 ng2-select-hoveytech 组件中的选择型控件封装在了这个标签里。同时，该组件内部也提供了一些属性：
ngModel
ngModel 是组件中的双向数据绑定，用于连通数据和视图。需要在组件外部定义一个变量，用于与 ngModel 进行绑定。
options
options 是组件中的选项列表。需要在组件外部定义一个数组，用于存储选项，并将该数组绑定到组件的 options 属性上。数组中每个元素需要包含一个 key 属性，用于存储选项的值，一个 label 属性，用于存储选项的显示文本。
yourModel: any;
options: any[];
this.options = [
{key: '1', label: '选项1'},
{key: '2', label: '选项2'},
{key: '3', label: '选项3'},
];placeholder
placeholder 属性用于指定选择型控件的提示文本。该属性需要绑定到一个字符串上，该字符串中可使用变量进行拼接。
multiple
multiple 属性用于设置选择型控件是否允许多选。该属性需要绑定到一个布尔值上。
width
width 属性用于设置选择型控件的宽度。该属性需要绑定到一个数字上。如果不传递该属性，组件将使用默认宽度。
searchable
searchable 属性用于设置选择型控件是否允许搜索。该属性需要绑定到一个布尔值上。
isClear
isClear 属性用于设置是否显示清除按钮，如果为真，将显示清除按钮。
示例代码
为了进一步加深对该组件的理解，下面给出一个实现基于 ng2-select-hoveytech 组件的自定义选择型控件的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------------
--------- -------------------
--------- -
------------ ---------------------------
-------------------
------------------- - - ------
-----------------
---------------
-------------------------
----------------
---------------------
---------------
--
--
------ ----- ----------------------- -
-------- ------ ------ - ---
-------- ------ ------ - ----
-------- ----------- ------- - -----
-------- -------- ----- - ---
--------- ------------------- - --- -------------------------
------ -------------- -------- - ---
------------- - -
---------- -
--------------------------------------------------
-
-该组件在输入中定义了标签、宽度、是否允许搜索、选项等选项。在输出中定义了一个事件，用于向外部传递所选择的值。同时，在模板中使用了 ng2-select-hoveytech 组件来实现选择型控件。当控件中的值发生变化时，调用 onChange 方法向外部输出 selectedItems 数组。使用者可以用该组件来构建自己的选择型控件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590781e8991b448d6618