在前端开发中,下拉菜单是一种广泛使用的交互元素,通常用于导航、筛选和选项选择等场景。然而,对于需要多级下拉菜单的复杂任务,标准 HTML 下拉菜单是无法满足需求的。幸运的是,Angular 提供了强大的组件化框架,使得开发可使用的多级下拉菜单变得非常容易。
第一步:准备项目
首先,我们需要在本地计算机上安装最新版本的 Angular CLI,并创建一个新的 Angular 项目。
$ npm install -g @angular/cli $ ng new multi-level-dropdown
然后,我们需要安装必要的依赖项 bootstrap 和 font-awesome:
$ npm install bootstrap font-awesome --save
在 src/styles.css 文件中导入这些库:
@import "~bootstrap/dist/css/bootstrap.css"; @import "~font-awesome/css/font-awesome.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