在前端开发中，下拉菜单是一种广泛使用的交互元素，通常用于导航、筛选和选项选择等场景。然而，对于需要多级下拉菜单的复杂任务，标准 HTML 下拉菜单是无法满足需求的。幸运的是，Angular 提供了强大的组件化框架，使得开发可使用的多级下拉菜单变得非常容易。
第一步：准备项目
首先，我们需要在本地计算机上安装最新版本的 Angular CLI，并创建一个新的 Angular 项目。
- --- ------- -- ------------ - -- --- --------------------
然后，我们需要安装必要的依赖项 bootstrap 和 font-awesome：
- --- ------- --------- ------------ ------
在 src/styles.css 文件中导入这些库：
------- ------------------------------------ ------- -------------------------------------
现在，我们已经准备好开始构建多级下拉菜单。
第二步：创建菜单组件
在 src/app 目录中创建一个新组件 multi-level-dropdown，并在其 HTML 模板中添加下拉菜单。
---- ------------- ---------------- ------------ ----------
-- -------------------- -------------------- ------------
------- ---------------------- ------------- ---------------------- -------------------------------- --------------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- -----------------------
--- -------------------
--- --------------- ----------
-- --------------- ---------------- -------- --------------------------- ---------------------- -------------------- ----------------------
-------- ----- -
----
--- --------------------- -----------------------------------------
--- -------------------------
-- -------------------- ---------------- ----------------- ----- -----
--- ----------------------
----
-- --------------------- ----------------- ---- -----
-----
----
-- --------------------- ----------------- ---- -----
-----
--- -------------------------
-- -------------------- ---------------- ----------------- ----- -----
--- ----------------------
----
-- --------------------- ----------------- ---- -----
-----
----
-- --------------------- ----------------- ---- -----
-----
-----
-----
-----
-----
-----
-----
-----
------
------注意，我们用了 Bootstrap 框架来方便构建多级下拉菜单。这个 HTML 模板包括三个级别的下拉菜单，其中 Dropdown level 1 是一个基本的下拉菜单，Dropdown level 2 是 Dropdown level 1 的子菜单，Dropdown level 3 是 Dropdown level 2 的子菜单。
第三步：创建组件通信服务
由于多级下拉菜单需要跨组件通信，我们需要为组件创建一个服务来共享数据。在 src/app 目录中创建一个新服务 dropdown.service.ts。
------ - ---------- - ---- ----------------
------ - --------------- - ---- -------
-------------
----------- ------
--
------ ----- --------------- -
------- ------ - --- ------------------------------
------ ---- - ---------------------------
------------ ---------- ---- -
-----------------------
-
-该服务使用了 BehaviorSubject（可观察的行为主题），它允许我们在不同组件之间共享数据。在这种情况下，我们需要将菜单数据（字符串数组）传递给 DropdownService 的 update() 方法，以允许 menu-item 组件订阅并显示正确的菜单项。
第四步：创建菜单项组件
接下来，我们需要为每个菜单项创建一个组件（menu-item.component.ts）。因为我们仅使用文本，所以该组件不需要任何输入属性。但是，该组件需要订阅 DropdownService 来获取正确的菜单项。
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- ----------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
------ -------- - ---
------------------- ---------------- ---------------- - -
----------- ---- -
---------------------------------------- -- -
---------- - -----
---
-
-该组件包含一个 items 数组，其中包含当前菜单项的子项文本。当我们创建新的菜单项（子项）时，我们可以调用 DropdownService 的 update() 方法更新 items 数组。我们将在下一步中显示如何为菜单项组件添加菜单项。
第五步：添加菜单项
现在，我们需要将菜单项添加到菜单项组件中，以及在菜单项子组件中添加递归逻辑。要实现这一点，我们需要在 multi-level-dropdown.component.ts 中导入 DropdownService 和 MenuItemComponent，并在该组件中设置初始菜单项（称为顶级菜单）。
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- ---------------------------
------------ ----------------------------------------
---------- ----------------------------------------
--
------ ----- --------------------------- ---------- ------ -
------ -------- - ---------- ----- --- --------- ----- --- --------- ----- ----
------------------- ---------------- ---------------- - -
----------- ---- -
----------------------------------------
-
-这个顶级菜单将传递给 menu-item 组件，并根据需要进行修改。为了添加新菜单项，我们需要编辑 menu-item.component.html，添加一个 ngFor 循环来遍历当前菜单项的所有子项。
--- ------------------- - -- ----------------------
--- ----------- ---- -- ------ ------------------------ ------------------------------------------- ------- --- ----
-- -------------------- ---------------- ----------- ---- ------
---- ----------------------
-------------------------------
------
-----
--- ----------- ---- -- ------ ------------------------------------------- ------ --- ----
-- --------------------- ----------- ---- ------
-----
-----在设置 ngFor 循环之前，我们先检查 items 数组是否有任何项。这可以防止在没有下拉菜单项的情况下渲染菜单项组件。然后，我们将根据当前项目的类型选择不同的循环方式。如果该项目是下拉菜单，则我们需要创建一个新的子菜单。为此，我们创建了一个包含 DropdownService 这个服务的 menu-item 子组件。在 menu-item.component.ts 中，我们会订阅并显示新的空子菜单，然后从 DropdownService 中接收的数据（新的菜单项）将被添加到这个 menu-item 子组件中。
示例代码
在这里，我们提供了完整的示例代码，以便您能够更好地理解多级下拉菜单的实现方法：
multi-level-dropdown.component.html
---- ------------- ---------------- ------------ ----------
-- -------------------- -------------------- ------------
------- ---------------------- ------------- ---------------------- -------------------------------- --------------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- -----------------------
--- -------------------
--- --------------- ----------
-- --------------- ---------------- -------- --------------------------- ---------------------- -------------------- ----------------------
-------- ----- -
----
--- --------------------- -----------------------------------------
--- -------------------------
-- -------------------- ---------------- ----------------- ----- -----
--- ----------------------
----
-- --------------------- ----------------- ---- -----
-----
----
-- --------------------- ----------------- ---- -----
-----
--- -------------------------
-- -------------------- ---------------- ----------------- ----- -----
--- ----------------------
----
-- --------------------- ----------------- ---- -----
-----
----
-- --------------------- ----------------- ---- -----
-----
-----
-----
-----
-----
-----
-----
-----
------
------
-------------------------------multi-level-dropdown.component.ts
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- ---------------------------
------------ ----------------------------------------
---------- ----------------------------------------
--
------ ----- --------------------------- ---------- ------ -
------ -------- - ---------- ----- --- --------- ----- --- --------- ----- ----
------------------- ---------------- ---------------- - -
----------- ---- -
----------------------------------------
-
-menu-item.component.html
--- ------------------- - -- ----------------------
--- ----------- ---- -- ------
------------------------
------------------------------------------- ------- --- ----
-- -------------------- ---------------- ----------- ---- ------
---- ----------------------
-------------------------------
------
-----
--- ----------- ---- -- ------ ------------------------------------------- ------ --- ----
-- --------------------- ----------- ---- ------
-----
-----menu-item.component.ts
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- ----------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
------ -------- - ---
------------------- ---------------- ---------------- - -
----------- ---- -
---------------------------------------- -- -
---------- - -----
---
-
-dropdown.service.ts
------ - ---------- - ---- ----------------
------ - --------------- - ---- -------
-------------
----------- ------
--
------ ----- --------------- -
------- ------ - --- ------------------------------
------ ---- - ---------------------------
------------ ---------- ---- -
-----------------------
-
-结论
使用 Angular 构建可使用的多级下拉菜单非常实用，因为它们可以减少代码量，提高代码可读性和可维护性。本文中，我们展示了如何使用 Bootstrap 和 Angular CLI 创建一个基本的多级下拉菜单，并介绍了组件通信和递归渲染子菜单的实现方式。
虽然本文只是一个简单的示例，但它提供了一种强大的方法来构建更复杂的下拉菜单，例如分层结构的导航菜单、筛选器和文本输入框。我们希望这篇文章对于学习 Angular 的前端工程师能够有所帮助，为他们解决任务提供思路和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670796edd91dce0dc86a939a