Angular Material 是 Angular 官方推荐的 UI 组件库，提供了丰富的组件和样式，可以极大地提升前端界面设计和开发效率。本教程将介绍如何使用 Angular Material 创建一个响应式导航菜单（Responsive Navigation Menu），并提供详细的说明和示例代码。
准备工作
在开始之前，请确保你满足以下要求：
- 已经安装了 Angular CLI
- 已经熟悉了 Angular 基础知识
如果你还没有安装 Angular CLI，请先到官网 https://cli.angular.io/ 下载安装。
创建项目
首先，使用 Angular CLI 创建一个新的 Angular 项目，执行以下命令：
ng new responsive-nav-menu
然后，进入项目目录，并安装 Angular Material 和 Angular CDK（Component Dev Kit）：
cd responsive-nav-menu ng add @angular/material
在安装过程中，你需要选择你想要使用的 Angular Material 主题和预先定义的配色方案。你可以根据项目需求进行选择。
安装完成后，运行以下命令以启动开发服务器：
ng serve
现在，在浏览器中访问 http://localhost:4200，你应该能看到一个 Angular 欢迎页面。
创建导航菜单组件
接下来，我们将创建一个新的导航菜单组件，以便我们可以在应用中调用它。执行以下命令：
ng generate component navigation-menu
以上命令将生成一个新的导航菜单组件，包括 HTML、CSS 和 TypeScript 文件。
在导航菜单组件的 HTML 文件中，我们将使用 Angular Material 提供的 sidenav 组件来创建我们的导航菜单。在模板中添加以下代码：
-- -------------------- ---- -------
---------------------- --------------------------
------------ ------- --------------- ---------------
----------------------------------- - ------ - --------
--------------------------------- - ------- - -------
--------------------- - ------ - --- - ------ - -------
------------------------ -------------- - ------ -- --------------------------
--------------
-------------- -------------- ------------------------- -------------------------
--------- ---------------------------------
----------------
-------------- ------------------- ------------------------- -------------------------
--------- ----------------------------------
----------------
---------------
--------------
---------------------
------------ ----------------
------- --------------- --------------------------
-------------------------
---------
---------------- ---------- -----------
--------------
-------------------------------
----------------------
------------------------以上代码定义了一个 <mat-sidenav> 元素实例，作为内容区域左侧的导航菜单。该元素使用了 Angular Material 提供的 mat-nav-list 和 mat-list-item 组件来显示导航菜单中的链接。同时，使用 mat-sidenav-content 元素实例作为内容区域的主要显示区域。
配置导航菜单
接下来，我们将为导航菜单组件配置响应式行为。首先，我们需要创建一个用于确定屏幕宽度的 Observable，在模板中使用它来确定导航菜单的模式（over 或 side）。为此，我们将添加以下代码到导航菜单组件的 TypeScript 文件中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ------------------- ----------- - ---- ----------------------
------------
--------- ----------------------
------------ -----------------------------------
---------- -----------------------------------
--
------ ----- ----------------------- -
------ ------------- -------------------
------------------------------- ------------------- -
----------------- - ---------------------------------------------- ---------------------
----------- -- -
-- ---------------- -
------ ----------------------------------------
- ---- -
------ --------------------------------------
-
---
-
-以上代码中的 screenWidth$ 变量是一个 Observable，用于跟踪当前窗口的宽度。在 constructor 构造函数中，我们使用 BreakpointObserver 服务来订阅屏幕宽度变化，并使用 RxJS 中的 map 操作符将结果映射为屏幕宽度值。我们可以在导航菜单组件的模板中使用 screenWidth$ 变量来反映屏幕宽度，并设置响应式导航菜单。
接着，我们需要为 mat-toolbar 元素添加一个点击事件侦听器，以便在屏幕宽度小于 960px 时关闭侧边栏。我们可以使用以下代码来实现：
<mat-toolbar color="primary" (click)="drawer.close()">
这将添加一个点击事件侦听器，以便在单击工具栏时关闭侧边栏。
最后，我们将为 mat-sidenav 元素添加 ngClass 属性，该属性使用 collapsed 类（如果屏幕宽度超过 960px，则添加该类）来反映导航菜单显示/隐藏的状态。以下代码添加了 ngClass 属性：
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.aria-expanded]="drawer.opened ? 'true' : 'false'"
[attr.aria-hidden]="drawer.opened ? 'false' : 'true'"
[mode]="(screenWidth$ | async) < 960 ? 'over' : 'side'"
[ngClass]="{'collapsed': !(screenWidth$ | async) }" (click)="drawer.toggle()">现在，我们已经完成了导航菜单组件的配置。我们可以将导航菜单组件的选择器添加到应用模板中，并尝试启动应用程序。
<app-navigation-menu></app-navigation-menu>
在浏览器中打开 http://localhost:4200，你应该能看到一个渲染的响应式导航菜单组件。如果你缩小屏幕窗口的宽度，你会发现导航菜单会转为菜单图标按钮，点击按钮后会展开或收起导航菜单。这是因为我们为导航菜单组件添加了响应式行为，并使用 Angular Material 管理了它的状态。
总结
本文介绍了如何使用 Angular Material 创建响应式导航菜单的操作步骤。首先，我们使用 Angular CLI 创建了一个新的 Angular 项目，并安装了 Angular Material 和 Angular CDK。接着，我们创建了一个导航菜单组件，并使用 Angular Material 的 sidenav 组件定义了导航菜单的 HTML 结构。最后，我们在导航菜单组件的 TypeScript 文件中添加了响应式行为，并在导航菜单的模板中使用它来管理导航菜单的状态。
通过本教程，你可以使用 Angular Material 创建一个响应式导航菜单，为你的应用增加美观性和交互性，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e541cff6b2d6eab30b456c