在单页应用（SPA）中，菜单是一个重要的组成部分，它帮助用户快速导航到需要的内容。而在多级菜单中，用户可以更加快速地访问到更深层次的内容。在 Angular 中，实现多级菜单可以使用 Angular Material 和路由器。
Angular Material
Angular Material 是一个 UI 组件库，它提供了很多常用的组件，例如按钮、卡片、对话框等。在实现多级菜单时，我们主要使用菜单组件和侧边栏组件。
首先，我们需要安装 Angular Material。在命令行中执行以下命令即可：
ng add @angular/material
接下来，在需要使用菜单的组件中，导入菜单和侧边栏组件：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
-----------
-------- -
--------------
-----------------
--
--
------ ----- --------- - -路由器
在 Angular 中，使用路由器定义应用程序的导航。在实现多级菜单时，我们可以使用路由器来定义每个菜单项对应的路由。定义路由时，可以使用“子路由”，从而实现多级路由。
首先，我们需要在 app.module.ts 中定义路由：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - ------------- - ---- ------------------------
------ - ---------------- - ---- ------------------------------
----- ------- ------ - -
- ----- --- ---------- ------------- --
-
----- -------
---------- --------------
--------- -
- ----- ----------- ---------- ---------------- --
- ----- ----------- ---------- ---------------- --
--
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- - -接下来，在菜单组件中，使用菜单组件和路由器来实现多级菜单：
-- -------------------- ---- ------- ------- ---------- ---------------------------------------- --------- ---------------- ------- ------------- ---------------------------- ------- ------------- -------------------------------------- ---------- ------- ------------- -------------------------------------- ---------- ----------- --------- -------------------- -- ------------- ----------------------------------- - - ---- ----- -- ------------- ----------------------------------- - - ---- ----- ----------- --------- -------------------- -- ------------- ----------------------------------- - - ---- ----- -- ------------- ----------------------------------- - - ---- ----- -----------
在上面的代码中，我们定义了两个子菜单 submenu1 和 submenu2，并定义了每个菜单项对应的路由。当用户点击一个菜单项时，路由器会自动导航到对应的路由和组件。
示例代码
以下是一个完整的示例代码，用于演示如何实现多级菜单：
app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------- ------ - ---- ------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - ------------- - ---- ------------------------
------ - ---------------- - ---- ------------------------------
----- ------- ------ - -
- ----- --- ---------- ------------- --
-
----- -------
---------- --------------
--------- -
- ----- ----------- ---------- ---------------- --
- ----- ----------- ---------- ---------------- --
--
--
--
-----------
------------- -
-------------
--------------
--------------
-----------------
--
-------- -
--------------
-----------------------------
------------------------
--------------
-----------------
--
---------- ---
---------- ---------------
--
------ ----- --------- - -app.component.html
-- -------------------- ---- -------
-----------------------
------------ ------------
------- ---------- ----------------------------
------- ---------- --------------------------------
--------------
---------------------
-------------------------------
----------------------
------------------------home.component.html
<h1>Home</h1>
menu.component.html
-- -------------------- ---- ------- ------- ---------- ---------------------------------------- --------- ---------------- ------- ------------- ---------------------------- ------- ------------- -------------------------------------- ---------- ------- ------------- -------------------------------------- ---------- ----------- --------- -------------------- -- ------------- ----------------------------------- - - ---- ----- -- ------------- ----------------------------------- - - ---- ----- ----------- --------- -------------------- -- ------------- ----------------------------------- - - ---- ----- -- ------------- ----------------------------------- - - ---- ----- -----------
submenu.component.html
<h1>Submenu 1</h1>
以上是一个简单的示例，演示了如何使用 Angular Material 和路由器实现多级菜单。在实际应用中，你可以根据实际需求来自定义菜单的样式和行为，以及路由的配置方式。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d740d7a941bf7134d1bcdd