Angular Material 与 CDK Schematics 安装与代码生成完全指南【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsAngular Material 内置了一整套基于 Angular CLI 的 Schematics代码生成器从一键安装、主题与字体配置到table、navigation、tree等常用 Material Design 组件的自动生成覆盖了应用初始化的全部环节。本文以本仓库Angular Components 组件库即 Angular Material / Angular CDK 的官方实现中的 guides/schematics.md 为主体结合 src/material/schematics 与 src/cdk/schematics 的真实源码系统讲解如何通过ng add完成安装、如何用生成器快速搭建组件以及 Material 3 自定义主题的生成原理读完即可在自己的 Angular 项目中上手使用。安装 SchematicsSchematics 随angular/cdk和angular/material两个 npm 包一起发布只要安装成功Angular CLI 就能自动发现并调用它们无需额外注册。在 Angular CLI 项目中执行以下命令会一次性完成两件事安装 Angular Material 与 CDK 依赖然后自动运行安装 schematicng add angular/material如果只想使用 CDK例如仅使用angular/cdk/overlay、angular/cdk/drag-drop等底层基础设施CDK 同样自带 schematicsng add angular/cdk从仓库源码看ng add的执行入口在 src/material/schematics/ng-add/index.ts它会读取项目package.json中angular/core的版本作为依赖版本基准若尚未声明angular/material则写入依赖同时补充angular/cdk与angular/forms随后注册一个NodePackageInstallTask执行依赖安装并在安装完成后通过RunSchematicTask触发名为ng-add-setup-project的后续任务。这个“先装依赖、再执行 setup”的两阶段设计正是为了保证 CDK 安装到位后依赖 CDK 工具的 setup schematic 能被正常加载见 src/material/schematics/collection.json 中ng-add与ng-add-setup-project两个隐藏 schematic 的声明。交互式配置项theme安装过程中 CLI 会提示选择主题。ng add的选项 schema 定义在 src/material/schematics/ng-add/schema.json核心选项如下选项类型默认值说明projectstring当前项目名要应用安装配置的 Angular 项目名themestringazure-blue应用的主题可选项包括azure-blueAzure/Blue、rose-redRose/Red、magenta-violetMagenta/Violet、cyan-orangeCyan/Orange四对起始预置色板例如可以显式指定项目与主题ng add angular/material --project my-app --theme rose-redng add自动完成的工作运行 Angular Material 的ng addschematic其实际执行逻辑位于 src/material/schematics/ng-add/setup-project.ts会为你的 Angular CLI 项目完成以下配置确保项目依赖写入package.json可参考 Getting Started 指南的依赖说明添加一个预置主题或自定义主题在index.html中引入 Roboto 字体在index.html中引入 Material 图标字体添加全局样式移除body的默认外边距为html和body设置height: 100%将 Roboto 设为应用的默认字体。从 setup-project.ts 可以看出一个细节如果目标项目是application类型schematic 会调用addThemeToAppStyles与addFontsToIndex完成主题样式注入与字体注入而如果目标项目是library类型则会打印提示信息——库项目消费 Angular Material 时无需额外初始化只需通过--project显式指定要初始化的应用项目即可。组件生成 SchematicsComponent Schematics除安装 schematic 外Angular Material 还提供多个用于一键生成 Material Design 组件的生成器注册清单见 src/material/schematics/collection.json名称说明address-form使用 Material Design 表单控件生成包含表单组form group的组件用于录入收货地址navigation生成包含响应式 Material Design 侧边栏sidenav与用于展示应用名称的工具栏的组件dashboard生成包含多张 Material Design 卡片与菜单、并按网格布局排列的组件table生成支持排序与分页的 Material Design 数据表格组件tree使用mat-tree组件生成可交互展示嵌套文件夹结构的组件同时Angular CDK 也提供一组组件生成器见 src/cdk/schematics/collection.json名称说明drag-drop使用angular/cdk/drag-drop指令生成可交互的待办事项列表组件所有生成器共用的通用选项各组件生成器基于同一个参数模型参见 src/material/schematics/ng-generate/address-form/schema.json除必填的组件名name外还支持以下常用选项选项别名说明path—组件创建目录默认取当前工作目录project—目标项目名默认取当前项目name—组件名必填inlineStyle-s样式是否内联进 TS 文件inlineTemplate-t模板是否内联进 TS 文件standalone—生成的组件是否为 standalone 组件viewEncapsulation-v视图封装策略Emulated/NonechangeDetection-c变更检测策略Default/OnPush默认Defaultprefix-p生成的组件选择器前缀style—样式文件扩展名skipTests—为true时不生成测试文件flat—是否创建子目录默认falseskipImport—跳过模块导入selector—组件选择器module-m声明该组件的模块export—声明模块是否导出该组件默认false因此所有生成命令都可以追加上述选项例如ng generate angular/material:table my-table --standalone --style scss --skipTestsAddress form 生成器运行address-form生成器会创建一个 Material Design 表单组组件其中包含Material Design 表单字段form fieldMaterial Design 单选控件radioMaterial Design 按钮。ng generate angular/material:address-form component-name生成的模板文件位于 src/material/schematics/ng-generate/address-form/files采用 Angular CLI 的模板占位符命名规则如__namedasherizeif-flat__会按组件名自动生成.ts、.html、样式文件与.spec.ts测试文件。Navigation 生成器navigation生成器创建一个包含应用名称工具栏、以及基于 Material 断点实现响应式的侧边栏组件ng generate angular/material:navigation component-name在 collection.json 中它声明了多个别名material-nav、materialNav、nav也就是说以下写法等价ng g angular/material:nav component-nameTable 生成器table生成器创建一个 Angular Materialtable组件并预配置好支持排序sorting与分页pagination的数据源ng generate angular/material:table component-name从 src/material/schematics/ng-generate/table/files 的模板结构可以看出除常规的四件套组件文件外它还会额外生成component-name-datasource.ts数据源模板文件这正是MatSort与MatPaginator接入MatTableDataSource的骨架。Dashboard 生成器dashboard生成器创建一个包含动态网格布局的 Material Design 卡片列表组件ng generate angular/material:dashboard component-name该生成器的别名为material-dashboard底层文件模板位于 src/material/schematics/ng-generate/dashboard/files。Tree 生成器tree生成器用于快速生成使用 Angular Materialmat-tree组件展示嵌套文件夹结构的组件ng generate angular/material:tree component-name与table类似src/material/schematics/ng-generate/tree/files 中同样包含一个额外的example-data.ts.template示例数据模板为树形结构提供初始化的嵌套数据。Drag and Drop 生成器drag-drop生成器由angular/cdk提供用于生成使用 CDK 拖拽指令的组件ng generate angular/cdk:drag-drop component-name它声明在 src/cdk/schematics/collection.json别名包括dragdrop、drag-and-drop。生成的组件使用cdkDropList与cdkDrag指令构建一个可拖拽排序的待办事项列表其文件模板位于 src/cdk/schematics/ng-generate/drag-drop/files。Material 3 主题生成 Schematictheme-colortheme-color生成器用于根据你指定的颜色生成 Material 3 调色板文件供主题文件使用若指定还会同时生成高对比度颜色覆盖的 mixinng generate angular/material:theme-color该 schematic 在 collection.json 中注册名为m3Theme、别名为theme-color其详细使用文档见 src/material/schematics/ng-generate/theme-color/README.md。它的工作原理是基于你提供的自定义颜色内部借助 Material Color Utilities推算出整套 Material 3 色板作为官方预置色板之外的另一种选择生成的色板经过对比度优化具备更好的可访问性。参数说明参数定义见 src/material/schematics/ng-generate/theme-color/schema.json必填参数primaryColor应用主色板primary palette使用的颜色。其余 Material 3 规范中的色板会自动基于主色板推算以确保整体配色和谐。可选参数secondaryColor次要色板颜色默认基于主色自动生成tertiaryColor第三色板颜色默认基于主色自动生成neutralColor中性色板颜色默认基于主色自动生成neutralVariantColor中性变体色板颜色默认基于主色自动生成errorColor错误色板颜色默认基于其他色板自动生成includeHighContrast是否在生成文件中定义高对比度取值Sass 文件会生成对应 mixin默认falsedirectory生成文件相对于项目内的目录路径默认生成在项目根目录isScss生成 Sass 还是 CSS 文件Angular 官方推荐生成 Sass 文件默认true。实际使用时可在命令行直接传参例如ng generate angular/material:theme-color --primaryColor #7C4DFF --isScss true --includeHighContrast true生成的 Sass 输出Sass themes当isScss为true默认时schematic 会在指定目录或项目根目录生成名为_theme-colors.scss的文件。文件导出的色板变量如$primary-palette、$tertiary-palette可以直接传入主题文件的thememixinuse angular/material as mat; use ./path/to/_theme-colors as my-theme; // location of generated file html { include mat.theme(( color: ( primary: my-theme.$primary-palette, tertiary: my-theme.$tertiary-palette, ), typography: Roboto, density: 0, )); }官方推荐生成 Sass 文件是因为 Sass 形式与 Angular Material 的主题系统 API 完全对齐具备错误处理能力且即便未来主题系统或系统变量名发生变化你的样式也能继续工作并持续获得支持。高对比度覆盖 mixinHigh contrast override mixins指定includeHighContrast后生成文件会额外包含高对比度覆盖 mixinhigh-contrast-overrides()它把系统级变量覆盖为你主题中的高对比度等价取值服务于偏好更高对比度或有无障碍需求的用户。结合用户系统的对比度偏好用法如下media (prefers-contrast: more) { include my-theme.high-contrast-overrides(light); }high-contrast-overrides()可传入light、dark或color-scheme三种取值显式亮色/暗色主题分别手动定义亮色与暗色主题在media (prefers-contrast: more)中调用对应取值的 mixin例如暗色主题应用high-contrast-overrides(dark)自适应主题在html上声明color-scheme: light darktheme()mixin 创建一个自动适应用户亮/暗偏好的单一主题此时在媒体查询中调用high-contrast-overrides(color-scheme)即可在亮色、亮色高对比、暗色、暗色高对比四种状态间自动切换。生成的 CSS 输出CSS themes当isScss为false时schematic 生成名为theme.css的文件其中直接定义全部系统变量system variables按颜色、排版、阴影elevation、形状shape与状态state分类。这些系统变量被各组件广泛引用修改一处即可全局生效部分颜色系统变量之间存在关联改动时需留意同步修改相关变量。颜色系统变量使用 CSS 的light-dark()函数定义。生成文件默认将color-scheme设为light即默认呈现亮色主题将其改为dark则呈现暗色主题改为light dark则自动跟随用户系统偏好html { /* COLOR SYSTEM VARIABLES */ color-scheme: light dark; /* Change to light dark to automatically toggle between light and dark themes. */ /* Primary palette variables */ --mat-sys-primary: light-dark(#984061, #ffb0c8); --mat-sys-on-primary: light-dark(#ffffff, #5e1133); ... }指定了includeHighContrast时高对比度颜色值会包在media (prefers-contrast: more)中只有用户系统设置了更高对比度偏好时才会生效html { color-scheme: light; --mat-sys-primary: light-dark(#984061, #ffb0c8); --mat-sys-on-primary: light-dark(#ffffff, #5e1133); ... media (prefers-contrast: more) { --mat-sys-primary: light-dark(#580b2f, #ffebef); --mat-sys-on-primary: light-dark(#ffffff, #000000); ... } }版本升级迁移ng-update除安装与代码生成外本仓库的 schematics 还包含一套完整的升级迁移框架。以 Material 为例src/material/schematics/migration.json 注册了migration-v22版本号22.0.0-0用于将项目一键升级到 v22CDK 侧的迁移实现位于 src/cdk/schematics/ng-update其迁移规则数据如attribute-selectors、class-names、input-names、output-names、css-selectors等统一维护在 src/cdk/schematics/ng-update/data 下覆盖了选择器、类名、输入输出属性、构造器签名、CSS 变量等各类破坏性变更的自动改写。也就是说当你执行ng update angular/material时升级工具会依据这些规则自动完成大部分 API 迁移工作这部分机制正是“安装与代码生成”主题在项目生命周期中的延伸保障。小结Angular Material 与 CDK 的 schematics 体系覆盖了“安装初始化 → 组件生成 → 主题定制 → 版本迁移”的完整链路ng add angular/material/ng add angular/cdk一键完成依赖、主题、字体与全局样式配置其两阶段任务设计保证了 CDK 依赖先行的正确性见 ng-add/index.tsaddress-form、navigation、dashboard、table、tree、drag-drop六个生成器可快速产出可直接运行的组件骨架且支持--standalone、--style、--skipTests等通用选项定制输出theme-color生成器把自定义颜色转化为可直接接入mat.theme()的 Material 3 色板与高对比度覆盖兼顾 Sass 与 CSS 两种输出形态详见 theme-color/README.mdng-update迁移框架在版本升级时自动处理破坏性变更保证项目平滑演进。想要深入源码可以重点阅读 src/material/schematics/collection.json生成器注册表、src/material/schematics/ng-generate各生成器实现与模板以及 src/cdk/schematics/ng-update迁移框架。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular Material 与 CDK Schematics 安装与代码生成完全指南
Angular Material 与 CDK Schematics 安装与代码生成完全指南【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsAngular Material 内置了一整套基于 Angular CLI 的 Schematics代码生成器从一键安装、主题与字体配置到table、navigation、tree等常用 Material Design 组件的自动生成覆盖了应用初始化的全部环节。本文以本仓库Angular Components 组件库即 Angular Material / Angular CDK 的官方实现中的 guides/schematics.md 为主体结合 src/material/schematics 与 src/cdk/schematics 的真实源码系统讲解如何通过ng add完成安装、如何用生成器快速搭建组件以及 Material 3 自定义主题的生成原理读完即可在自己的 Angular 项目中上手使用。安装 SchematicsSchematics 随angular/cdk和angular/material两个 npm 包一起发布只要安装成功Angular CLI 就能自动发现并调用它们无需额外注册。在 Angular CLI 项目中执行以下命令会一次性完成两件事安装 Angular Material 与 CDK 依赖然后自动运行安装 schematicng add angular/material如果只想使用 CDK例如仅使用angular/cdk/overlay、angular/cdk/drag-drop等底层基础设施CDK 同样自带 schematicsng add angular/cdk从仓库源码看ng add的执行入口在 src/material/schematics/ng-add/index.ts它会读取项目package.json中angular/core的版本作为依赖版本基准若尚未声明angular/material则写入依赖同时补充angular/cdk与angular/forms随后注册一个NodePackageInstallTask执行依赖安装并在安装完成后通过RunSchematicTask触发名为ng-add-setup-project的后续任务。这个“先装依赖、再执行 setup”的两阶段设计正是为了保证 CDK 安装到位后依赖 CDK 工具的 setup schematic 能被正常加载见 src/material/schematics/collection.json 中ng-add与ng-add-setup-project两个隐藏 schematic 的声明。交互式配置项theme安装过程中 CLI 会提示选择主题。ng add的选项 schema 定义在 src/material/schematics/ng-add/schema.json核心选项如下选项类型默认值说明projectstring当前项目名要应用安装配置的 Angular 项目名themestringazure-blue应用的主题可选项包括azure-blueAzure/Blue、rose-redRose/Red、magenta-violetMagenta/Violet、cyan-orangeCyan/Orange四对起始预置色板例如可以显式指定项目与主题ng add angular/material --project my-app --theme rose-redng add自动完成的工作运行 Angular Material 的ng addschematic其实际执行逻辑位于 src/material/schematics/ng-add/setup-project.ts会为你的 Angular CLI 项目完成以下配置确保项目依赖写入package.json可参考 Getting Started 指南的依赖说明添加一个预置主题或自定义主题在index.html中引入 Roboto 字体在index.html中引入 Material 图标字体添加全局样式移除body的默认外边距为html和body设置height: 100%将 Roboto 设为应用的默认字体。从 setup-project.ts 可以看出一个细节如果目标项目是application类型schematic 会调用addThemeToAppStyles与addFontsToIndex完成主题样式注入与字体注入而如果目标项目是library类型则会打印提示信息——库项目消费 Angular Material 时无需额外初始化只需通过--project显式指定要初始化的应用项目即可。组件生成 SchematicsComponent Schematics除安装 schematic 外Angular Material 还提供多个用于一键生成 Material Design 组件的生成器注册清单见 src/material/schematics/collection.json名称说明address-form使用 Material Design 表单控件生成包含表单组form group的组件用于录入收货地址navigation生成包含响应式 Material Design 侧边栏sidenav与用于展示应用名称的工具栏的组件dashboard生成包含多张 Material Design 卡片与菜单、并按网格布局排列的组件table生成支持排序与分页的 Material Design 数据表格组件tree使用mat-tree组件生成可交互展示嵌套文件夹结构的组件同时Angular CDK 也提供一组组件生成器见 src/cdk/schematics/collection.json名称说明drag-drop使用angular/cdk/drag-drop指令生成可交互的待办事项列表组件所有生成器共用的通用选项各组件生成器基于同一个参数模型参见 src/material/schematics/ng-generate/address-form/schema.json除必填的组件名name外还支持以下常用选项选项别名说明path—组件创建目录默认取当前工作目录project—目标项目名默认取当前项目name—组件名必填inlineStyle-s样式是否内联进 TS 文件inlineTemplate-t模板是否内联进 TS 文件standalone—生成的组件是否为 standalone 组件viewEncapsulation-v视图封装策略Emulated/NonechangeDetection-c变更检测策略Default/OnPush默认Defaultprefix-p生成的组件选择器前缀style—样式文件扩展名skipTests—为true时不生成测试文件flat—是否创建子目录默认falseskipImport—跳过模块导入selector—组件选择器module-m声明该组件的模块export—声明模块是否导出该组件默认false因此所有生成命令都可以追加上述选项例如ng generate angular/material:table my-table --standalone --style scss --skipTestsAddress form 生成器运行address-form生成器会创建一个 Material Design 表单组组件其中包含Material Design 表单字段form fieldMaterial Design 单选控件radioMaterial Design 按钮。ng generate angular/material:address-form component-name生成的模板文件位于 src/material/schematics/ng-generate/address-form/files采用 Angular CLI 的模板占位符命名规则如__namedasherizeif-flat__会按组件名自动生成.ts、.html、样式文件与.spec.ts测试文件。Navigation 生成器navigation生成器创建一个包含应用名称工具栏、以及基于 Material 断点实现响应式的侧边栏组件ng generate angular/material:navigation component-name在 collection.json 中它声明了多个别名material-nav、materialNav、nav也就是说以下写法等价ng g angular/material:nav component-nameTable 生成器table生成器创建一个 Angular Materialtable组件并预配置好支持排序sorting与分页pagination的数据源ng generate angular/material:table component-name从 src/material/schematics/ng-generate/table/files 的模板结构可以看出除常规的四件套组件文件外它还会额外生成component-name-datasource.ts数据源模板文件这正是MatSort与MatPaginator接入MatTableDataSource的骨架。Dashboard 生成器dashboard生成器创建一个包含动态网格布局的 Material Design 卡片列表组件ng generate angular/material:dashboard component-name该生成器的别名为material-dashboard底层文件模板位于 src/material/schematics/ng-generate/dashboard/files。Tree 生成器tree生成器用于快速生成使用 Angular Materialmat-tree组件展示嵌套文件夹结构的组件ng generate angular/material:tree component-name与table类似src/material/schematics/ng-generate/tree/files 中同样包含一个额外的example-data.ts.template示例数据模板为树形结构提供初始化的嵌套数据。Drag and Drop 生成器drag-drop生成器由angular/cdk提供用于生成使用 CDK 拖拽指令的组件ng generate angular/cdk:drag-drop component-name它声明在 src/cdk/schematics/collection.json别名包括dragdrop、drag-and-drop。生成的组件使用cdkDropList与cdkDrag指令构建一个可拖拽排序的待办事项列表其文件模板位于 src/cdk/schematics/ng-generate/drag-drop/files。Material 3 主题生成 Schematictheme-colortheme-color生成器用于根据你指定的颜色生成 Material 3 调色板文件供主题文件使用若指定还会同时生成高对比度颜色覆盖的 mixinng generate angular/material:theme-color该 schematic 在 collection.json 中注册名为m3Theme、别名为theme-color其详细使用文档见 src/material/schematics/ng-generate/theme-color/README.md。它的工作原理是基于你提供的自定义颜色内部借助 Material Color Utilities推算出整套 Material 3 色板作为官方预置色板之外的另一种选择生成的色板经过对比度优化具备更好的可访问性。参数说明参数定义见 src/material/schematics/ng-generate/theme-color/schema.json必填参数primaryColor应用主色板primary palette使用的颜色。其余 Material 3 规范中的色板会自动基于主色板推算以确保整体配色和谐。可选参数secondaryColor次要色板颜色默认基于主色自动生成tertiaryColor第三色板颜色默认基于主色自动生成neutralColor中性色板颜色默认基于主色自动生成neutralVariantColor中性变体色板颜色默认基于主色自动生成errorColor错误色板颜色默认基于其他色板自动生成includeHighContrast是否在生成文件中定义高对比度取值Sass 文件会生成对应 mixin默认falsedirectory生成文件相对于项目内的目录路径默认生成在项目根目录isScss生成 Sass 还是 CSS 文件Angular 官方推荐生成 Sass 文件默认true。实际使用时可在命令行直接传参例如ng generate angular/material:theme-color --primaryColor #7C4DFF --isScss true --includeHighContrast true生成的 Sass 输出Sass themes当isScss为true默认时schematic 会在指定目录或项目根目录生成名为_theme-colors.scss的文件。文件导出的色板变量如$primary-palette、$tertiary-palette可以直接传入主题文件的thememixinuse angular/material as mat; use ./path/to/_theme-colors as my-theme; // location of generated file html { include mat.theme(( color: ( primary: my-theme.$primary-palette, tertiary: my-theme.$tertiary-palette, ), typography: Roboto, density: 0, )); }官方推荐生成 Sass 文件是因为 Sass 形式与 Angular Material 的主题系统 API 完全对齐具备错误处理能力且即便未来主题系统或系统变量名发生变化你的样式也能继续工作并持续获得支持。高对比度覆盖 mixinHigh contrast override mixins指定includeHighContrast后生成文件会额外包含高对比度覆盖 mixinhigh-contrast-overrides()它把系统级变量覆盖为你主题中的高对比度等价取值服务于偏好更高对比度或有无障碍需求的用户。结合用户系统的对比度偏好用法如下media (prefers-contrast: more) { include my-theme.high-contrast-overrides(light); }high-contrast-overrides()可传入light、dark或color-scheme三种取值显式亮色/暗色主题分别手动定义亮色与暗色主题在media (prefers-contrast: more)中调用对应取值的 mixin例如暗色主题应用high-contrast-overrides(dark)自适应主题在html上声明color-scheme: light darktheme()mixin 创建一个自动适应用户亮/暗偏好的单一主题此时在媒体查询中调用high-contrast-overrides(color-scheme)即可在亮色、亮色高对比、暗色、暗色高对比四种状态间自动切换。生成的 CSS 输出CSS themes当isScss为false时schematic 生成名为theme.css的文件其中直接定义全部系统变量system variables按颜色、排版、阴影elevation、形状shape与状态state分类。这些系统变量被各组件广泛引用修改一处即可全局生效部分颜色系统变量之间存在关联改动时需留意同步修改相关变量。颜色系统变量使用 CSS 的light-dark()函数定义。生成文件默认将color-scheme设为light即默认呈现亮色主题将其改为dark则呈现暗色主题改为light dark则自动跟随用户系统偏好html { /* COLOR SYSTEM VARIABLES */ color-scheme: light dark; /* Change to light dark to automatically toggle between light and dark themes. */ /* Primary palette variables */ --mat-sys-primary: light-dark(#984061, #ffb0c8); --mat-sys-on-primary: light-dark(#ffffff, #5e1133); ... }指定了includeHighContrast时高对比度颜色值会包在media (prefers-contrast: more)中只有用户系统设置了更高对比度偏好时才会生效html { color-scheme: light; --mat-sys-primary: light-dark(#984061, #ffb0c8); --mat-sys-on-primary: light-dark(#ffffff, #5e1133); ... media (prefers-contrast: more) { --mat-sys-primary: light-dark(#580b2f, #ffebef); --mat-sys-on-primary: light-dark(#ffffff, #000000); ... } }版本升级迁移ng-update除安装与代码生成外本仓库的 schematics 还包含一套完整的升级迁移框架。以 Material 为例src/material/schematics/migration.json 注册了migration-v22版本号22.0.0-0用于将项目一键升级到 v22CDK 侧的迁移实现位于 src/cdk/schematics/ng-update其迁移规则数据如attribute-selectors、class-names、input-names、output-names、css-selectors等统一维护在 src/cdk/schematics/ng-update/data 下覆盖了选择器、类名、输入输出属性、构造器签名、CSS 变量等各类破坏性变更的自动改写。也就是说当你执行ng update angular/material时升级工具会依据这些规则自动完成大部分 API 迁移工作这部分机制正是“安装与代码生成”主题在项目生命周期中的延伸保障。小结Angular Material 与 CDK 的 schematics 体系覆盖了“安装初始化 → 组件生成 → 主题定制 → 版本迁移”的完整链路ng add angular/material/ng add angular/cdk一键完成依赖、主题、字体与全局样式配置其两阶段任务设计保证了 CDK 依赖先行的正确性见 ng-add/index.tsaddress-form、navigation、dashboard、table、tree、drag-drop六个生成器可快速产出可直接运行的组件骨架且支持--standalone、--style、--skipTests等通用选项定制输出theme-color生成器把自定义颜色转化为可直接接入mat.theme()的 Material 3 色板与高对比度覆盖兼顾 Sass 与 CSS 两种输出形态详见 theme-color/README.mdng-update迁移框架在版本升级时自动处理破坏性变更保证项目平滑演进。想要深入源码可以重点阅读 src/material/schematics/collection.json生成器注册表、src/material/schematics/ng-generate各生成器实现与模板以及 src/cdk/schematics/ng-update迁移框架。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考