ng2-simple-dropdown 是一个基于 Angular2 的 npm 包，用于实现简单的下拉菜单。本文将介绍如何使用这个包来实现下拉菜单。
安装
使用 npm 可以非常便捷地安装 ng2-simple-dropdown：
npm install ng2-simple-dropdown --save
安装完成后，在 AppModule 中导入 DropdownModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- ---------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- -------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用
使用 ng2-simple-dropdown 创建下拉菜单非常简单：
-- -------------------- ---- -------
-------------------- ---------------------------
------- -----------------------------------
--- ----------------
------ --------------- ----------
------ --------------- ----------
------ --------------- ----------
------ --------------- ----------
-----
----------------------
--------
------------------------------
---------我们需要三个元素来创建下拉菜单：
- ng2-simple-dropdown：作为整个下拉菜单的包裹元素。
- ng2DropdownToggle：作为下拉菜单的触发器。
- ng2DropdownMenu：下拉菜单的选项。
onSelect 事件将在选择下拉菜单中的选项时触发，并返回这个选项的值。在上面的示例中，我们使用 alert() 方法来显示选项的值。
深入
ng2-simple-dropdown 的实现原理是非常简单的：通过 CSS 切换 ng2DropdownMenu 的显示/隐藏，同时对 ng2-simple-dropdown 引用 NgControl 来管理下拉菜单与表单控件之间的关系。
在实践中，我们可能需要对下拉菜单的样式和行为进行进一步的自定义。ng2-simple-dropdown 支持下面的 CSS 类：
- dropdown-menu：下拉菜单的包裹元素。
- dropdown-item：下拉菜单中的选项。
- dropdown-divider：下拉菜单中的分隔符。
- dropdown-header：下拉菜单中的头部。
结语
ng2-simple-dropdown 是一个非常简单而实用的下拉菜单 npm 包。通过本文的介绍，你已经了解了如何使用它并进行进一步的自定义。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d7705