Angular Material 快速入门从ng add安装到首个组件实战【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本篇技术指南以官方文档 guides/getting-started.md 为核心完整讲解如何在 Angular 项目中安装与启用 Angular Material涵盖前置条件、ng add angular/material的交互式配置、主题与排版选择以及通过MatSlideToggle组件验证安装是否成功的完整流程。读完后你将掌握一套可复制的 Angular Material 项目初始化方案并理解安装命令在仓库源码位于src/material/schematics/ng-add/中的每一步真实执行逻辑。前置条件Angular CLI 与版本要求在开始之前你的本机环境需要满足以下条件已安装Angular CLI官方通过npm install -g angular/cli安装后续所有命令均依赖ng命令完成项目创建、依赖注入与本地开发服务器启动。一个已存在的 Angular 应用工程例如通过ng new project-name创建的默认脚手架。Node.js 与 npm/pnpm 环境正常可访问 npm 仓库下载依赖。本指南假设 Angular CLI 已安装完毕且工作目录位于你的 Angular 应用根目录下。若尚无项目可先执行ng new my-app创建脚手架再继续下面的步骤。安装 Angular Material一行命令 两步交互在应用根目录执行ng add angular/materialng add会自动完成依赖解析与安装。执行过程中CLI 会向你提出两个问题以确定需要生成的功能选择一组起步调色板Starter prebuilt color palettes或自定义主题官方提供了四组现成的 Material 3 调色板组合供选择它们映射为mat.theme()中的primary与tertiary色板对应关系在 create-theme.ts 中可以找到选项值primary 色板tertiary 色板azure-blueazurebluerose-redroseredmagenta-violetmagentavioletcyan-orangecyanorange也可以选择custom自定义主题以便后续扩展出完全符合自身品牌调性的主题体系。这一交互选项在 schema.json 中定义默认值为azure-blue。是否设置全局 Angular Material 排版typography样式决定是否为整个应用应用 Angular Material 的全局排版规范字体族、字号、行高等。该选项对应 schema.ts 中的typography: boolean字段。除交互问答外ng add还会自动执行以下动作无需手动干预向package.json添加项目依赖向index.html添加Roboto 字体向index.html添加Material Design 图标字体追加若干全局 CSS 样式用于移除body的默认外边距为html与body设置height: 100%将 Roboto 设为应用默认字体。执行完毕后Angular Material 即已完成配置可以直接在组件中使用。深入幕后ng add在仓库源码中到底做了什么ng add angular/material并非简单的包安装而是触发了一个完整的 Angular Schematic示意图工作流其实现位于仓库的src/material/schematics/ng-add/目录。理解这条调用链有助于你在遇到配置问题时快速定位原因。第一步入口示意图——注册依赖并编排任务入口示意图 index.ts 是ng add的执行入口负责三件事读取现有版本信息从目标工程的package.json中读取angular/core与angular/material的版本标签通过 package-config.ts 中的getPackageVersionFromPackageJson获取确保所有 Angular 依赖版本标签一致。补齐依赖向package.json写入angular/cdkAngular Material 的组件开发套件所有 Material 组件都构建于 CDK 之上与angular/forms表单支持。写入逻辑见 package-config.ts 的addPackageToPackageJson它会对依赖键做字典序排序并避免重复写入。如果ng add并非由 CLI 触发例如直接运行示意图、或 Material 仅作为 devDependency 存在则会回退到占位版本号~0.0.0-PLACEHOLDER。编排任务链先注册NodePackageInstallTask安装依赖再注册ng-add-setup-project子示意图且子任务依赖安装任务完成。从源码结构看CDK 被刻意先于 Material 安装因为 Material 的示意图工具函数依赖 CDK必须先就绪才能加载。第二步setup-project 示意图——主题与字体落地setup-project.ts 会根据工作区类型分流处理当目标是Application应用类型工程时串联执行两个规则addThemeToAppStyles写入主题样式与addFontsToIndex写入字体。当目标是Library库类型工程时仅打印提示库工程消费 Material 无需额外设置如需作用于指定项目可通过--project参数显式指定。这里也解释了schema.json中project字段的用途——它默认取当前项目名$source: projectName。主题写入策略为什么文件会这样生成addThemeToAppStyles的实现位于 theming.ts其处理逻辑相当讲究向后兼容--theme custom早期版本中custom表示只创建自定义主题文件如今每次都会生成可扩展的自定义主题文件因此传入custom会被优雅地回退为默认的azure-blue避免历史脚本失效。寻找项目主样式文件SCSS找到则把mat.theme()代码块插入文件头部InsertChangerecorder.insertLeft找不到则在sourceRoot下创建默认的material-theme.scss并自动把该文件注册到build目标的styles配置中。样式去重与替换若styles中已存在angular/material/prebuilt-themes的预构建主题会安全地将其替换为新主题若已存在material-theme.scss这样的自定义主题文件则不会覆盖避免破坏用户的定制样式而是打印日志提示手动添加。生成的mat.theme()模板内容可在 create-theme.ts 中查看它会为html注入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 { color-scheme: light; // 可改为 dark或 light dark 跟随系统 background-color: var(--mat-sys-surface); color: var(--mat-sys-on-surface); font: var(--mat-sys-body-medium); margin: 0; height: 100%; }这段代码定义了 Material 3 的 CSS 系统变量如--mat-sys-surface、--mat-sys-on-surfaceMaterial 组件与你的自定义组件都可以直接引用这些系统级变量color-scheme一行即可实现浅色/深色主题切换或跟随系统偏好。注释中还保留了density: 0以控制组件密度。字体注入preconnect 与样式表fonts/material-fonts.ts 负责向index.html的head追加内容两条preconnect链接预连接到fonts.googleapis.com与fonts.gstatic.com带crossorigin加速字体加载Roboto 字体样式表wght300;400;500即 Light/Regular/Medium 三档字重displayswap保证文字先渲染Material Icons 图标字体样式表。如果找不到项目的index.html示意图会抛出SchematicsException明确报错。验证安装显示一个真实的 Material 组件配置完成后文档建议用最直观的方式验证一切是否正常——在页面中渲染一个slide toggle开关组件。1. 在组件中导入MatSlideToggleAngular 18 的独立组件standalone模式下只需把MatSlideToggle加入组件的imports数组import {MatSlideToggle} from angular/material/slide-toggle; Component({ selector: app-root, imports: [MatSlideToggle], template: mat-slide-toggleToggle me!/mat-slide-toggle , }) export class App {}2. 在模板中放置标签在app.html或上例中的内联模板中加入mat-slide-toggleToggle me!/mat-slide-toggle3. 启动本地开发服务器ng serve浏览器访问http://localhost:4200页面即出现一个可点击切换的 Material 开关组件。组件背后的源码MatSlideToggle是什么MatSlideToggle是仓库内真实存在的公开组件定义于 slide-toggle.ts其选择器为mat-slide-toggle。从源码结构看见 slide-toggle.ts 的导入清单它深度集成了表单能力实现了ControlValueAccessor与Validator可无缝接入模板驱动与响应式表单ngModel/formControl无障碍与交互依赖 CDK 的_IdGenerator生成唯一 id与FocusMonitor焦点管理支持键盘操作与屏幕阅读器外观与反馈集成了MatRipple水波纹反馈与动画支持并可通过MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS注入默认配置样式体系主题样式拆分为 M2 与 M3 两套实现_m2-slide-toggle.scss 与 _m3-slide-toggle.scss由mat.theme()统一驱动。组件测试覆盖可参考 slide-toggle.spec.ts若需要以编程方式驱动开关可借助其测试 Harness见 slide-toggle-harness.ts。更进一步其他官方 Schematicsng add安装示意图只是起点。Angular Material 还内置了多类组件生成示意图component schematics详见仓库指南 guides/schematics.md可用一条命令快速生成预制的完整页面/组件骨架例如ng generate angular/material:nav ng generate angular/material:table ng generate angular/material:address-form它们能帮你生成带有正确 Material 组件组合、已适配主题与排版的导航栏、数据表格、地址表单等常用界面并在生成后由你自己补充业务逻辑。CDK 同样附带一系列组件示意图可在 guides/schematics.md 中查阅完整清单。常见问题与注意事项--theme custom兼容性历史 CLI 脚本若硬编码了--theme custom不会报错但会按默认的azure-blue处理见 theming.ts。自定义构建器冲突如果工程的buildtarget 没有使用 Angular CLI 默认构建器示意图无法自动写入主题会抛出SchematicsException中止若是testtarget 用了自定义构建器则仅告警不中断主题对运行测试非必需详见 theming.ts。主题文件重复若material-theme.scss已存在示意图不会覆盖它需要按日志提示手动把生成的主题文件加入styles配置。库工程提示在 Library 工程中执行ng add只会安装依赖并打印提示不会改动样式与字体如需作用于指定项目请使用ng add angular/material --project project-name。至此你的 Angular 应用已经完整接入 Angular Material依赖就绪、主题生效、字体注入、全局样式重置并成功渲染了第一个交互式组件。接下来即可按需引入按钮、表单、表格等任意 Material 组件并基于mat.theme()体系定制属于你自己的设计语言。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考