尧图网页设计 
如何继承 CdkStepper 构建自定义 Stepper 组件并支持 linear 模式【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components在 Angular 项目中如果你需要一个分步向导wizard流程但不希望被 Angular Material 的 Material Design 样式绑定CDK stepper 是官方给出的基座它只提供「哪个步骤处于激活状态」这一层行为包括键盘交互和前进/回退 API外观完全由你自己用 CSS 控制。本文基于仓库内文档 CDK stepper 自定义指南 和 stepper.md给出一条从「继承CdkStepper建组件」到「开启 linear 模式并验证其行为」的完整操作路径。完成后可得到的结果一个自定义 Stepper 组件步骤内容可以随意组织普通模式下用户可自由切换步骤linear 模式下必须完成前一步才能进入下一步。准备可用的 API 面自定义 Stepper 只需要一个前置条件项目可以引入angular/cdk/stepper入口仓库中的示例即从该路径导入import {CdkStepper, CdkStepperModule} from angular/cdk/stepper;按指南说明组件类继承CdkStepper之后就可以直接访问基类上定义的属性包括linear、selectedIndex和steps。模板里还会用到selected当前激活的CdkStep以及cdkStepperPrevious/cdkStepperNext两个按钮指令——它们放在步骤内时会自动绑定点击事件驱动工作流前进或回退。创建继承自 CdkStepper 的组件自定义组件的核心是两点类上继承CdkStepper并在providers中把自己注册为CdkStepper。仓库中的参考实现 cdk-custom-stepper-without-form-example.ts 如下Component({ selector: example-custom-stepper, templateUrl: ./example-custom-stepper.html, styleUrl: ./example-custom-stepper.css, providers: [{provide: CdkStepper, useExisting: CustomStepper}], imports: [NgTemplateOutlet, CdkStepperModule], }) export class CustomStepper extends CdkStepper { selectStepByIndex(index: number): void { this.selectedIndex index; } }providers中的{provide: CdkStepper, useExisting: CustomStepper}是必需的一步指南原话是「This custom stepper provides itself as CdkStepper so that it can be recognized by other components」即靠这条 provider 让组件能被其他组件按CdkStepper识别。selectStepByIndex用于点击步骤按钮时手动切换直接给selectedIndex赋值即可。注意这个 setter 有边界保护在 stepper.ts 中传入越界值会抛出错误cdkStepper: Cannot assign out-of-bounds value to selectedIndex.后续排查导航问题时如果你看到这条报错说明传入的步骤下标超出了步骤数量。模板与样式如何渲染当前步骤模板的职责是把「当前步骤的内容」投射出来并放上下一步/上一步按钮。参考实现 example-custom-stepper.htmlsection classexample-container header h2Step {{ selectedIndex 1 }}/{{ steps.length }}/h2 /header div [ngTemplateOutlet]selected ? selected.content : null/div footer classexample-step-navigation-bar button classexample-nav-button cdkStepperPreviouslarr;/button for (step of steps; track step; let i $index) { button classexample-step [class.example-active]selectedIndex i (click)selectStepByIndex(i)Step {{ i 1 }}/button } button classexample-nav-button cdkStepperNextrarr;/button /footer /section各部分的作用div [ngTemplateOutlet]selected ? selected.content : nullCdkStep的内容会投射到当前选中步骤的content上这里负责把它渲染出来for (step of steps; ...)遍历steps生成步骤按钮当前步骤通过selectedIndex i加高亮类点击时调用selectStepByIndex(i)cdkStepperPrevious/cdkStepperNext两个按钮指令点击后自动回退/前进无需手写导航逻辑。样式文件example-custom-stepper.css完全是你自己的实现CDK 不强制任何样式.example-container { border: 1px solid; padding: 10px; margin: 10px; } .example-step-navigation-bar { display: flex; justify-content: flex-start; margin-top: 10px; } .example-step { background: transparent; border: 0; margin: 0 10px; padding: 10px; color: inherit; } .example-step.example-active { border-bottom: 1px solid; font-weight: 600; } .example-nav-button { background: transparent; border: 0; color: inherit; }指南中还给出一个等价的简化写法类方法叫onClick(index: number)、模板用[style.display]selected ? block : none包裹ng-container [ngTemplateOutlet]selected.content。两种写法功能相同类名/方法名按你的项目命名习惯取即可本文后续步骤统一采用仓库参考实现的命名。在页面模板中使用自定义 Stepper在宿主组件模板里引入example-custom-stepper每个步骤必须用cdk-step包裹。最小用法参考示例模板example-custom-stepper cdk-step pThis is any content of Step 1/p /cdk-step cdk-step pThis is any content of Step 2/p /cdk-step /example-custom-stepper步骤内容可以是任意内容。可选分支如果你的步骤来自数据集合指南展示了用for迭代并在每个cdk-step里放自定义步骤组件的写法example-custom-stepper for (step of mySteps; track step) { cdk-step my-step-component [step]$index/my-step-component /cdk-step } /example-custom-stepper此时组件的导入按仓库示例的写法宿主组件通过forwardRef引用同一文件中定义的CustomStepper并导入CdkStepperModuleimports: [forwardRef(() CustomStepper), CdkStepperModule],开启 linear 模式并定义「步骤完成」在组件标签上加linear属性即可开启线性模式。stepper.md对这一模式的行为定义是用户必须完成前面的步骤才能继续。那么「完成」由谁判断文档给出两种机制且二者可以共存若completed和stepControl同时设置stepControl优先。方式一不依赖表单用 completed 属性指南中的无表单示例每个步骤设editablefalse并把[completed]绑定到一个外部状态。在完成之前completed为false用户无法进入下一步点击「Complete step」把状态置为true后才能前进example-custom-stepper linear cdk-step editablefalse [completed]completed input typetext namea valueCannot proceed to next step / button (click)completeStep()Complete step/button /cdk-step cdk-step editablefalse input typetext nameb valueb / /cdk-step /example-custom-stepperexport class App { completed false; completeStep(): void { this.completed true; } }方式二用表单校验绑定 stepControl仓库示例 cdk-linear-stepper-with-form 展示了给每个步骤绑定顶层AbstractControl的写法步骤有效后线性模式才放行isLinear true; firstFormGroup this._formBuilder.group({ firstControl: [, Validators.required], }); secondFormGroup this._formBuilder.group({ secondControl: [, Validators.required], });example-custom-linear-stepper [linear]isLinear cdk-step [stepControl]firstFormGroup label forstepOneInputStep 1 input/label form [formGroup]firstFormGroup input placeholderInput formControlNamefirstControl idstepOneInput required /form /cdk-step cdk-step [stepControl]secondFormGroup label forstepTwoInputStep 2 input/label form [formGroup]secondFormGroup input placeholderInput formControlNamesecondControl idstepTwoInput required /form /cdk-step /example-custom-linear-stepper使用表单时文档明确了两条规则配置时必须区分单个表单覆盖整个 Stepper步骤中间的 next/previous 按钮必须设为typebutton否则会在所有步骤完成前提前触发表单提交每个步骤一个表单任意一个表单提交即推动工作流前进。与 linear 模式直接相关的三个步骤属性stepper.md还定义了三个影响线性流程判断的属性optionallinear stepper 中如果不要求必须完成某一步在CdkStep上设置optionaleditable步骤默认可编辑用户可以回到已完成步骤修改。设editablefalse关闭该行为上方无表单示例即用到了它completed默认情况下linear stepper 中当步骤有效isValid(this.stepControl)且用户已交互过时返回true。你也可以像方式一那样显式赋值来覆盖默认行为。验证行为完成组装后按文档定义的行为核对以下现象普通模式点击各步骤按钮或左右导航按钮头部的Step {n}/{总数}随之变化当前步骤内容通过ngTemplateOutlet切换显示左右导航受cdkStepperNext/cdkStepperPrevious指令驱动无需手动处理。linear 模式 completed在completed为false时点击下一步无法前进文档原话该属性「wont allow the user to continue until it becomes true」点击「Complete step」后再点下一步才前进。linear 模式 stepControl表单必填项未填时步骤无效线性模式不放行填写有效后前进。越界赋值手动给selectedIndex赋越界值会抛出cdkStepper: Cannot assign out-of-bounds value to selectedIndex .可用于确认自己的赋值逻辑没有算错下标。重置需要把 Stepper 恢复到初始状态时调用reset方法。注意文档提醒重置会调用底层表单控件的reset其值会被清空——如果你的步骤依赖表单数据重置前需要有重建数据的逻辑。键盘交互与可访问性CDK stepper 自带键盘支持stepper.md给出的快捷键为快捷键行为Left Arrow聚焦上一个步骤头部Right Arrow聚焦下一个步骤头部Enter选中当前聚焦的步骤Space选中当前聚焦的步骤除键盘支持外CDK 层不再施加其他无障碍处理。stepper.md建议在实现自己的组件时把 Stepper 按 tabbed view 处理整体容器用roletablist可点击的步骤头部用roletab选中后展开的内容区用roletabpanel步骤头部再加aria-selected反映选中状态。文档指向仓库中的 Angular Material steppersrc/material/stepper作为可参考的可访问实现。参考实现入口自定义 Stepper无表单完整示例cdk-custom-stepper-without-form-example.ts、模板、样式linear 表单示例cdk-linear-stepper-with-form-example.ts、模板基类行为与步骤状态定义stepper.tslinear、selectedIndex、selected、next、previous、reset如果后续需要带 Material Design 样式的标准 Stepper 而不是完全自定样式可以对照仓库中的MatStepper文档与示例本文路径只覆盖 CDK 层的自定义场景。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何继承 CdkStepper 构建自定义 Stepper 组件并支持 linear 模式
如何继承 CdkStepper 构建自定义 Stepper 组件并支持 linear 模式【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components在 Angular 项目中如果你需要一个分步向导wizard流程但不希望被 Angular Material 的 Material Design 样式绑定CDK stepper 是官方给出的基座它只提供「哪个步骤处于激活状态」这一层行为包括键盘交互和前进/回退 API外观完全由你自己用 CSS 控制。本文基于仓库内文档 CDK stepper 自定义指南 和 stepper.md给出一条从「继承CdkStepper建组件」到「开启 linear 模式并验证其行为」的完整操作路径。完成后可得到的结果一个自定义 Stepper 组件步骤内容可以随意组织普通模式下用户可自由切换步骤linear 模式下必须完成前一步才能进入下一步。准备可用的 API 面自定义 Stepper 只需要一个前置条件项目可以引入angular/cdk/stepper入口仓库中的示例即从该路径导入import {CdkStepper, CdkStepperModule} from angular/cdk/stepper;按指南说明组件类继承CdkStepper之后就可以直接访问基类上定义的属性包括linear、selectedIndex和steps。模板里还会用到selected当前激活的CdkStep以及cdkStepperPrevious/cdkStepperNext两个按钮指令——它们放在步骤内时会自动绑定点击事件驱动工作流前进或回退。创建继承自 CdkStepper 的组件自定义组件的核心是两点类上继承CdkStepper并在providers中把自己注册为CdkStepper。仓库中的参考实现 cdk-custom-stepper-without-form-example.ts 如下Component({ selector: example-custom-stepper, templateUrl: ./example-custom-stepper.html, styleUrl: ./example-custom-stepper.css, providers: [{provide: CdkStepper, useExisting: CustomStepper}], imports: [NgTemplateOutlet, CdkStepperModule], }) export class CustomStepper extends CdkStepper { selectStepByIndex(index: number): void { this.selectedIndex index; } }providers中的{provide: CdkStepper, useExisting: CustomStepper}是必需的一步指南原话是「This custom stepper provides itself as CdkStepper so that it can be recognized by other components」即靠这条 provider 让组件能被其他组件按CdkStepper识别。selectStepByIndex用于点击步骤按钮时手动切换直接给selectedIndex赋值即可。注意这个 setter 有边界保护在 stepper.ts 中传入越界值会抛出错误cdkStepper: Cannot assign out-of-bounds value to selectedIndex.后续排查导航问题时如果你看到这条报错说明传入的步骤下标超出了步骤数量。模板与样式如何渲染当前步骤模板的职责是把「当前步骤的内容」投射出来并放上下一步/上一步按钮。参考实现 example-custom-stepper.htmlsection classexample-container header h2Step {{ selectedIndex 1 }}/{{ steps.length }}/h2 /header div [ngTemplateOutlet]selected ? selected.content : null/div footer classexample-step-navigation-bar button classexample-nav-button cdkStepperPreviouslarr;/button for (step of steps; track step; let i $index) { button classexample-step [class.example-active]selectedIndex i (click)selectStepByIndex(i)Step {{ i 1 }}/button } button classexample-nav-button cdkStepperNextrarr;/button /footer /section各部分的作用div [ngTemplateOutlet]selected ? selected.content : nullCdkStep的内容会投射到当前选中步骤的content上这里负责把它渲染出来for (step of steps; ...)遍历steps生成步骤按钮当前步骤通过selectedIndex i加高亮类点击时调用selectStepByIndex(i)cdkStepperPrevious/cdkStepperNext两个按钮指令点击后自动回退/前进无需手写导航逻辑。样式文件example-custom-stepper.css完全是你自己的实现CDK 不强制任何样式.example-container { border: 1px solid; padding: 10px; margin: 10px; } .example-step-navigation-bar { display: flex; justify-content: flex-start; margin-top: 10px; } .example-step { background: transparent; border: 0; margin: 0 10px; padding: 10px; color: inherit; } .example-step.example-active { border-bottom: 1px solid; font-weight: 600; } .example-nav-button { background: transparent; border: 0; color: inherit; }指南中还给出一个等价的简化写法类方法叫onClick(index: number)、模板用[style.display]selected ? block : none包裹ng-container [ngTemplateOutlet]selected.content。两种写法功能相同类名/方法名按你的项目命名习惯取即可本文后续步骤统一采用仓库参考实现的命名。在页面模板中使用自定义 Stepper在宿主组件模板里引入example-custom-stepper每个步骤必须用cdk-step包裹。最小用法参考示例模板example-custom-stepper cdk-step pThis is any content of Step 1/p /cdk-step cdk-step pThis is any content of Step 2/p /cdk-step /example-custom-stepper步骤内容可以是任意内容。可选分支如果你的步骤来自数据集合指南展示了用for迭代并在每个cdk-step里放自定义步骤组件的写法example-custom-stepper for (step of mySteps; track step) { cdk-step my-step-component [step]$index/my-step-component /cdk-step } /example-custom-stepper此时组件的导入按仓库示例的写法宿主组件通过forwardRef引用同一文件中定义的CustomStepper并导入CdkStepperModuleimports: [forwardRef(() CustomStepper), CdkStepperModule],开启 linear 模式并定义「步骤完成」在组件标签上加linear属性即可开启线性模式。stepper.md对这一模式的行为定义是用户必须完成前面的步骤才能继续。那么「完成」由谁判断文档给出两种机制且二者可以共存若completed和stepControl同时设置stepControl优先。方式一不依赖表单用 completed 属性指南中的无表单示例每个步骤设editablefalse并把[completed]绑定到一个外部状态。在完成之前completed为false用户无法进入下一步点击「Complete step」把状态置为true后才能前进example-custom-stepper linear cdk-step editablefalse [completed]completed input typetext namea valueCannot proceed to next step / button (click)completeStep()Complete step/button /cdk-step cdk-step editablefalse input typetext nameb valueb / /cdk-step /example-custom-stepperexport class App { completed false; completeStep(): void { this.completed true; } }方式二用表单校验绑定 stepControl仓库示例 cdk-linear-stepper-with-form 展示了给每个步骤绑定顶层AbstractControl的写法步骤有效后线性模式才放行isLinear true; firstFormGroup this._formBuilder.group({ firstControl: [, Validators.required], }); secondFormGroup this._formBuilder.group({ secondControl: [, Validators.required], });example-custom-linear-stepper [linear]isLinear cdk-step [stepControl]firstFormGroup label forstepOneInputStep 1 input/label form [formGroup]firstFormGroup input placeholderInput formControlNamefirstControl idstepOneInput required /form /cdk-step cdk-step [stepControl]secondFormGroup label forstepTwoInputStep 2 input/label form [formGroup]secondFormGroup input placeholderInput formControlNamesecondControl idstepTwoInput required /form /cdk-step /example-custom-linear-stepper使用表单时文档明确了两条规则配置时必须区分单个表单覆盖整个 Stepper步骤中间的 next/previous 按钮必须设为typebutton否则会在所有步骤完成前提前触发表单提交每个步骤一个表单任意一个表单提交即推动工作流前进。与 linear 模式直接相关的三个步骤属性stepper.md还定义了三个影响线性流程判断的属性optionallinear stepper 中如果不要求必须完成某一步在CdkStep上设置optionaleditable步骤默认可编辑用户可以回到已完成步骤修改。设editablefalse关闭该行为上方无表单示例即用到了它completed默认情况下linear stepper 中当步骤有效isValid(this.stepControl)且用户已交互过时返回true。你也可以像方式一那样显式赋值来覆盖默认行为。验证行为完成组装后按文档定义的行为核对以下现象普通模式点击各步骤按钮或左右导航按钮头部的Step {n}/{总数}随之变化当前步骤内容通过ngTemplateOutlet切换显示左右导航受cdkStepperNext/cdkStepperPrevious指令驱动无需手动处理。linear 模式 completed在completed为false时点击下一步无法前进文档原话该属性「wont allow the user to continue until it becomes true」点击「Complete step」后再点下一步才前进。linear 模式 stepControl表单必填项未填时步骤无效线性模式不放行填写有效后前进。越界赋值手动给selectedIndex赋越界值会抛出cdkStepper: Cannot assign out-of-bounds value to selectedIndex .可用于确认自己的赋值逻辑没有算错下标。重置需要把 Stepper 恢复到初始状态时调用reset方法。注意文档提醒重置会调用底层表单控件的reset其值会被清空——如果你的步骤依赖表单数据重置前需要有重建数据的逻辑。键盘交互与可访问性CDK stepper 自带键盘支持stepper.md给出的快捷键为快捷键行为Left Arrow聚焦上一个步骤头部Right Arrow聚焦下一个步骤头部Enter选中当前聚焦的步骤Space选中当前聚焦的步骤除键盘支持外CDK 层不再施加其他无障碍处理。stepper.md建议在实现自己的组件时把 Stepper 按 tabbed view 处理整体容器用roletablist可点击的步骤头部用roletab选中后展开的内容区用roletabpanel步骤头部再加aria-selected反映选中状态。文档指向仓库中的 Angular Material steppersrc/material/stepper作为可参考的可访问实现。参考实现入口自定义 Stepper无表单完整示例cdk-custom-stepper-without-form-example.ts、模板、样式linear 表单示例cdk-linear-stepper-with-form-example.ts、模板基类行为与步骤状态定义stepper.tslinear、selectedIndex、selected、next、previous、reset如果后续需要带 Material Design 样式的标准 Stepper 而不是完全自定样式可以对照仓库中的MatStepper文档与示例本文路径只覆盖 CDK 层的自定义场景。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考