在 Angular 生态系统中，UI 组件库的选择对项目的开发效率、维护成本和用户体验有着深远的影响。而 Angular Material 作为 Angular 团队的官方组件库，凭借其与 Angular 框架的深度集成、对 Material Design 规范的完整实现、以及对可访问性和国际化的原生支持，已经成为 Angular 开发者构建企业级应用的首选方案。
本文将从 Angular Material 的核心理念入手，系统全面地介绍其设计哲学、安装配置、核心组件、主题定制、响应式布局以及最佳实践，帮助读者从零开始掌握这一强大的 UI 框架。
一、Angular Material 概述
1.1 什么是 Angular Material
Angular Material 是 Angular 官方团队开发和维护的 UI 组件库，它实现了 Google 的 Material Design 设计规范，为 Angular 开发者提供了一套高质量、可访问、易定制的 UI 组件。
根据 Angular Material 官方文档的定义，其“高质量”体现在以下几个维度：
1.2 Angular Material 的独特价值
与其他 UI 组件库相比，Angular Material 具有以下独特优势：
1.官方背书，长期维护
Angular Material 由 Angular 团队官方维护，这意味着它与 Angular 框架的版本同步更新，兼容性有保障。使用第三方 UI 库时，曾出现过项目因库停止维护而被迫重构的情况，而 Angular Material 不存在这样的风险。
2.与 Angular 深度集成
Angular Material 的组件与 Angular 的表单系统（Reactive Forms）、变更检测机制（OnPush）深度集成。例如，表单控件会自动响应 ngModel 和 formControl 的状态变化，并显示相应的验证错误信息。这种深度集成是第三方组件库难以完全实现的。
3.开箱即用的可访问性
Angular Material 的所有组件都内置了 ARIA 属性、键盘导航和屏幕阅读器支持。例如，mat-dialog 会自动管理焦点，打开时将焦点移至对话框内，关闭时恢复到触发元素；mat-menu 支持键盘方向键导航。开发者在几乎没有额外工作的情况下，就能构建出符合 WCAG 标准的无障碍应用。
4.Material Design 3 (M3) 全面支持
随着 Material Design 3 的推出，Angular Material 已经全面迁移到 M3 设计令牌系统。这意味着组件支持动态颜色方案（包括自定义主色、辅色和强调色），并原生支持亮色/暗色主题切换。
1.3 Angular Material vs 其他主流组件库
很多开发者最初对 Angular Material 望而却步的原因之一是“它的组件看上去有点少”。然而，这种“少即是多”的设计哲学实际上是一种优势——在一般的业务场景中这些组件已经足够使用。除了常用组件之外，Angular Material 还有一个强大的组件开发包 CDK，开发者可以利用它构建高度定制的自定义组件。
1.4 组件分类概览
Angular Material 的组件体系主要分为以下几个大类：
二、安装与配置
2.1 使用 Angular CLI 一键安装（推荐）
Angular Material 提供了官方 Schematics 工具，可以自动完成安装和配置工作：
ng add @angular/material
运行这个命令后，CLI 会自动执行以下操作：
安装 @angular/material、@angular/cdk 和 @angular/animations 三个核心包
在 styles.scss 中配置 Material 主题
在 index.html 中配置 Roboto 字体和 Material Icons 图标库
在 angular.json 中添加必要的配置
2.2 安装过程中的交互选项
执行ng add命令时，CLI 会询问几个配置问题：
1.选择预置主题
Angular Material 提供了多个预置主题选项：
2.是否启用全局排版样式
启用后，Angular Material 会设置全局 CSS 样式，包括为所有 HTML 元素提供合理的字体、行高、边距等。
3.是否启用浏览器动画
启用后，Angular Material 会导入 BrowserAnimationsModule，为组件提供过渡动画效果。
2.3 手动配置（不使用 CLI）
如果希望手动控制配置过程，可以按照以下步骤操作：
# 安装核心包
npm install @angular/material @angular/cdk @angular/animations
全局样式配置（styles.scss）：
// 导入 Material Design 3 主题配置[citation:6]
@use '@angular/material' as mat;
html {
height: 100%;
@include mat.theme((
color: (
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: 0,
));
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
导入动画模块（app.config.ts）：
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimations(),
// 其他 providers...
]
};
2.4 Material Icons 配置
为了让 Material Icons 正常工作，需要在 index.html 的
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
