前言
在现代 Web 应用程序开发过程中，选择器组件是常用的 UI 组件。在 Angular 框架中，自带的 select 组件并不支持下拉框数据的动态刷新等一系列高级功能。而发布在 npm 上的 angular-select2-js-component 包则提供了一种便捷的方式对 select 组件进行扩展。本文将介绍该组件的使用方法，并提供示例代码。
依赖
使用 angular-select2-js-component 之前，需要安装以下的 npm 包：
- jQuery
- Select2
- Angular
安装
使用 npm 下载：
npm install angular-select2-js-component --save
在 app.module.ts 中引入模块：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------------
-----------
-------- -
-- ---
-------------
--
-- ---
--
------ ----- --------- - -示例代码
HTML
<select select2 [data]="data" [(ngModel)]="selected"> </select>
TypeScript
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- - ---- ----------
------- --- -- ----
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
--------- -------- - ------
---- - -
- --- ---- ----- ----- --
- --- ---- ----- ----- --
- --- ---- ----- ----- -
--
----------- ---- -
----- -------- ------- - -
----------- -----
--------- --------
------------ -----
--
-----------------------------
-
-指导意义
通过使用 angular-select2-js-component，可以便捷地为 select 组件添加高级功能。如上面示例代码中的 language、allowClear、placeholder 等属性都是原生 select 组件不支持的。而且 angular-select2-js-component 还支持 select 组件数据的动态刷新。该组件让我们在使用 select 组件时更加高效和方便，推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f85238a385564ab6c90