 实现交互式向导导航)
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd 的 Steps 步骤条组件中默认情况下步骤项只是静态的流程展示但许多业务场景如可跳转的分步表单、导航式向导要求用户点击某个步骤即可直接跳转。本文聚焦于components/steps/demo/clickable.md所讲解的能力只要订阅(nzIndexChange)事件Steps 便会自动切换为可点击状态。读完本文你将掌握可点击步骤条的完整用法、事件回传的索引语义、禁用与边界条件以及它在组件源码steps.component.ts 与 step.component.ts中的底层实现原理。一、为什么订阅一个事件就能让 Steps 可点击nz-steps组件本身并不区分可点击与不可点击两种形态它的可点击能力是由事件监听者的存在与否动态决定的。查看 steps.component.ts 中的updateChildrenSteps()方法可以发现关键一行step.clickable this.nzIndexChange.observers.length 0;也就是说当你在模板中绑定了(nzIndexChange)...后nzIndexChange这个EventEmitter上就存在观察者组件据此把每一个nz-step标记为clickable。一旦clickable为真step.component.ts 中的模板会为步骤容器加上语义化属性div #itemContainer classant-steps-item-container [attr.role]clickable !nzDisabled ? button : null [tabindex]clickable !nzDisabled ? 0 : null 因此rolebutton与tabindex0让每个步骤具备按钮语义既能被鼠标点击也能被键盘聚焦配合回车等交互。这正是订阅事件即开启点击的设计初衷可点击不是独立的开关属性而是由(nzIndexChange)的订阅状态派生出来的行为。二、完整示例水平与竖直两种方向的可点击 Steps官方演示位于 clickable.ts它同时展示了水平与竖直两种布局核心模板如下nz-steps [nzCurrent]index() (nzIndexChange)onIndexChange($event) nz-step nzTitleFinished [nzDisabled]disable nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps nz-divider / nz-steps nzDirectionvertical [nzCurrent]index() (nzIndexChange)onIndexChange($event) nz-step nzTitleFinished nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps对应组件类使用 Angular 的signal管理当前步骤索引export class NzDemoStepsClickableComponent { readonly index signal(0); disable false; onIndexChange(index: number): void { this.index.set(index); } }要点如下[nzCurrent]index()是受控绑定当前步骤完全由组件类中的信号值驱动点击后必须通过onIndexChange把新索引写回indexUI 才会真正更新(nzIndexChange)onIndexChange($event)中$event是被点击步骤的索引值从 0 开始计数类型为number第一组步骤条中的[nzDisabled]disable展示了禁用点击的用法将disable置为true后该步骤即使绑定事件也不再响应点击两组步骤条共用一个index信号点击水平条或竖直条都会同步驱动另一个的当前状态适合需要多视图联动的场景。三、事件触发机制与三个过滤条件点击事件并不会无条件触发。在 step.component.ts 的ngOnInit中每个步骤都监听了容器上的原生clickfromEventOutsideAngular(this.itemContainer.nativeElement, click) .pipe( filter(() this.clickable this.currentIndex ! this.index !this.nzDisabled), takeUntilDestroyed(this.destroyRef) ) .subscribe(() { this.clickOutsideAngular$.next(this.index); });fromEventOutsideAngular来自 core/util 工具集它在 Angular Zone 之外订阅原生事件避免不必要的变更检测触发随后在 steps.component.ts 中父组件汇总所有步骤的事件流并重新进入 Zone 派发this.indexChangeSubscription merge(...this.steps.map(step step.clickOutsideAngular$)) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(index { if (this.nzIndexChange.observers.length) { this.ngZone.run(() this.nzIndexChange.emit(index)); } });从filter条件可以提炼出事件生效的三个前提该步骤必须处于可点击状态clickable为真即父级绑定了(nzIndexChange)被点击的步骤不能是当前步骤currentIndex ! this.index——点击正在 process 的步骤不会触发事件避免无意义的重复跳转该步骤未被禁用!nzDisabled。这三条边界逻辑均有对应的测试用例验证见 steps.spec.ts 中的step clickable测试组包括点击非当前步骤时onIndexChange被调用且参数为1、禁用后点击不触发、点击 process 状态步骤不触发、disable()/enable()动态切换后行为正确等。四、配合 nzDisabled 与 enable()/disable() 做细粒度控制除了在模板中静态传入[nzDisabled]disablenz-step组件还暴露了实例方法用于运行时动态控制定义于 step.component.tsenable(): void { this.nzDisabled false; this.cdr.markForCheck(); } disable(): void { this.nzDisabled true; this.cdr.markForCheck(); }使用方式例如通过ViewChildren(NzStepComponent)拿到步骤实例ViewChildren(NzStepComponent) steps!: QueryListNzStepComponent; // 禁掉第 2 个步骤的点击 this.steps.toArray()[1].disable(); // 恢复点击 this.steps.toArray()[1].enable();同时注意 step.component.ts 中nzDisabled使用booleanAttribute变换因此模板中[nzDisabled]disable与nzDisabled均合法。被禁用后步骤容器的rolebutton与tabindex都会被移除视觉与语义上同步表现为不可交互。五、可点击能力在其它 Steps 形态中的复用可点击机制不限于基础横向/纵向步骤条。同目录下的 nav.ts 演示了nzTypenavigation导航型步骤条同样通过(nzIndexChange)获得点击跳转能力nz-steps nzTypenavigation nzSizesmall [nzCurrent]index() (nzIndexChange)onIndexChange($event)因为可点击状态是由nzIndexChange.observers.length决定的与nzType、nzSize、nzDirection等形态属性解耦所以只要订阅事件任何形态default、navigation、horizontal、vertical、small的步骤条都会自动变为可点击。其ant-steps-navigation样式类在 steps.component.ts 的宿主绑定中设置点击行为测试见 steps.spec.ts。六、相关 API 速查以下是nz-steps与可点击行为直接相关的 API完整定义见 doc/index.zh-CN.md 与 doc/index.en-US.mdnz-steps整体步骤条参数说明类型默认值[nzCurrent]指定当前步骤从 0 开始计数子步骤可通过nzStatus覆盖状态number0[nzDirection]步骤条方向horizontal/verticalvertical \| horizontalhorizontal[nzType]步骤条类型default/navigationdefault \| navigationdefault[nzSize]大小default/smallsmall \| defaultdefault[nzStartIndex]指定起始序号number0(nzIndexChange)点击单个步骤时触发的事件回传被点击步骤的索引number-nz-step单个步骤参数说明类型默认值[nzTitle]标题string \| TemplateRefvoid-[nzDescription]详情描述string \| TemplateRefvoid-[nzSubtitle]子标题string \| TemplateRefvoid-[nzStatus]指定状态未配置时由nzCurrent自动推导wait/process/finish/errorwait \| process \| finish \| errorwait[nzDisabled]禁用点击booleanfalse[nzPercentage]process 状态下步骤的进度百分比仅基础类型生效number-七、从源码视角理解整体调用链将上文串联起来可点击 Steps 的完整工作链路如下模板绑定(nzIndexChange)后EventEmitter产生观察者steps.component.ts 将每个nz-step标记为clickablestep.component.ts 据此为步骤容器添加rolebutton与tabindex0用户在 Zone 外部点击容器step.component.ts 的fromEventOutsideAngular捕获事件经filter校验三个条件可点击、非当前步骤、未禁用后向clickOutsideAngular$发出索引父组件用merge汇总所有步骤的点击流在存在观察者时通过ngZone.run重新进入 Angular Zone 并emit(index)应用层在onIndexChange中更新signal经由[nzCurrent]index()回写驱动步骤条刷新到新状态。其中第 4 步的ngZone.run是保证事件回传后变更检测能够正确执行的关键由于原生点击是在 Zone 之外监听的必须显式回到 Zone 内派发nzIndexChange的订阅回调中修改的信号值才能被框架及时感知。八、最佳实践小结受控索引始终让nzCurrent与组件状态绑定如signal点击事件只是提案最终索引由你在onIndexChange中决定是否采纳便于拦截非法跳转默认即联动不绑定(nzIndexChange)时步骤条保持纯展示无需额外开关绑定即获得键盘可达性tabindex0与语义化按钮可访问性开箱即用边界已知点击当前步骤不会触发事件禁用步骤既不可点击也不可聚焦复用性强horizontal / vertical / navigation / small 等任意形态均适用同一机制多个步骤条可共享同一个索引信号实现联动。如需查看可点击步骤条的完整演示源码与相关测试可进一步阅读 clickable.ts、clickable.md 以及 steps.spec.ts。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Anchor 横向导航模式实战nzDirectionhorizontal 用法与实现原理ng zorro antd Anchor 横向导航模式实战 nzDirectionhorizontal 用法与实现原理 导读 ng zorro antdUI组件前端ng-zorro-antd响应式导航实现移动端菜单适配ng zorro antd响应式导航实现移动端菜单适配 你是否在开发Angular应用时遇到过导航菜单在移动端显示混乱的问题本文将详细介绍如何使用ng zoUI组件前端antd-mobile Steps 步骤条组件详解状态推导、方向布局与样式定制antd mobile Steps 步骤条组件详解状态推导、方向布局与样式定制 Steps 步骤条是 antd mobile 中用于「引导用户按流程完成多步骤UI组件前端移动开发上一篇web-frameworks部署指南DockerPostgreSQL环境快速搭建下一篇终极Android APK签名神器uber-apk-signer一站式解决签名、对齐和验证难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/28 2:52:34 · 阅读 1.2k ng-zorro-antd Steps 可点击步骤条：通过 (nzIndexChange) 实现交互式向导导航
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd 的 Steps 步骤条组件中默认情况下步骤项只是静态的流程展示但许多业务场景如可跳转的分步表单、导航式向导要求用户点击某个步骤即可直接跳转。本文聚焦于components/steps/demo/clickable.md所讲解的能力只要订阅(nzIndexChange)事件Steps 便会自动切换为可点击状态。读完本文你将掌握可点击步骤条的完整用法、事件回传的索引语义、禁用与边界条件以及它在组件源码steps.component.ts 与 step.component.ts中的底层实现原理。一、为什么订阅一个事件就能让 Steps 可点击nz-steps组件本身并不区分可点击与不可点击两种形态它的可点击能力是由事件监听者的存在与否动态决定的。查看 steps.component.ts 中的updateChildrenSteps()方法可以发现关键一行step.clickable this.nzIndexChange.observers.length 0;也就是说当你在模板中绑定了(nzIndexChange)...后nzIndexChange这个EventEmitter上就存在观察者组件据此把每一个nz-step标记为clickable。一旦clickable为真step.component.ts 中的模板会为步骤容器加上语义化属性div #itemContainer classant-steps-item-container [attr.role]clickable !nzDisabled ? button : null [tabindex]clickable !nzDisabled ? 0 : null 因此rolebutton与tabindex0让每个步骤具备按钮语义既能被鼠标点击也能被键盘聚焦配合回车等交互。这正是订阅事件即开启点击的设计初衷可点击不是独立的开关属性而是由(nzIndexChange)的订阅状态派生出来的行为。二、完整示例水平与竖直两种方向的可点击 Steps官方演示位于 clickable.ts它同时展示了水平与竖直两种布局核心模板如下nz-steps [nzCurrent]index() (nzIndexChange)onIndexChange($event) nz-step nzTitleFinished [nzDisabled]disable nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps nz-divider / nz-steps nzDirectionvertical [nzCurrent]index() (nzIndexChange)onIndexChange($event) nz-step nzTitleFinished nzDescriptionThis is a description. / nz-step nzTitleIn Progress nzDescriptionThis is a description. / nz-step nzTitleWaiting nzDescriptionThis is a description. / /nz-steps对应组件类使用 Angular 的signal管理当前步骤索引export class NzDemoStepsClickableComponent { readonly index signal(0); disable false; onIndexChange(index: number): void { this.index.set(index); } }要点如下[nzCurrent]index()是受控绑定当前步骤完全由组件类中的信号值驱动点击后必须通过onIndexChange把新索引写回indexUI 才会真正更新(nzIndexChange)onIndexChange($event)中$event是被点击步骤的索引值从 0 开始计数类型为number第一组步骤条中的[nzDisabled]disable展示了禁用点击的用法将disable置为true后该步骤即使绑定事件也不再响应点击两组步骤条共用一个index信号点击水平条或竖直条都会同步驱动另一个的当前状态适合需要多视图联动的场景。三、事件触发机制与三个过滤条件点击事件并不会无条件触发。在 step.component.ts 的ngOnInit中每个步骤都监听了容器上的原生clickfromEventOutsideAngular(this.itemContainer.nativeElement, click) .pipe( filter(() this.clickable this.currentIndex ! this.index !this.nzDisabled), takeUntilDestroyed(this.destroyRef) ) .subscribe(() { this.clickOutsideAngular$.next(this.index); });fromEventOutsideAngular来自 core/util 工具集它在 Angular Zone 之外订阅原生事件避免不必要的变更检测触发随后在 steps.component.ts 中父组件汇总所有步骤的事件流并重新进入 Zone 派发this.indexChangeSubscription merge(...this.steps.map(step step.clickOutsideAngular$)) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(index { if (this.nzIndexChange.observers.length) { this.ngZone.run(() this.nzIndexChange.emit(index)); } });从filter条件可以提炼出事件生效的三个前提该步骤必须处于可点击状态clickable为真即父级绑定了(nzIndexChange)被点击的步骤不能是当前步骤currentIndex ! this.index——点击正在 process 的步骤不会触发事件避免无意义的重复跳转该步骤未被禁用!nzDisabled。这三条边界逻辑均有对应的测试用例验证见 steps.spec.ts 中的step clickable测试组包括点击非当前步骤时onIndexChange被调用且参数为1、禁用后点击不触发、点击 process 状态步骤不触发、disable()/enable()动态切换后行为正确等。四、配合 nzDisabled 与 enable()/disable() 做细粒度控制除了在模板中静态传入[nzDisabled]disablenz-step组件还暴露了实例方法用于运行时动态控制定义于 step.component.tsenable(): void { this.nzDisabled false; this.cdr.markForCheck(); } disable(): void { this.nzDisabled true; this.cdr.markForCheck(); }使用方式例如通过ViewChildren(NzStepComponent)拿到步骤实例ViewChildren(NzStepComponent) steps!: QueryListNzStepComponent; // 禁掉第 2 个步骤的点击 this.steps.toArray()[1].disable(); // 恢复点击 this.steps.toArray()[1].enable();同时注意 step.component.ts 中nzDisabled使用booleanAttribute变换因此模板中[nzDisabled]disable与nzDisabled均合法。被禁用后步骤容器的rolebutton与tabindex都会被移除视觉与语义上同步表现为不可交互。五、可点击能力在其它 Steps 形态中的复用可点击机制不限于基础横向/纵向步骤条。同目录下的 nav.ts 演示了nzTypenavigation导航型步骤条同样通过(nzIndexChange)获得点击跳转能力nz-steps nzTypenavigation nzSizesmall [nzCurrent]index() (nzIndexChange)onIndexChange($event)因为可点击状态是由nzIndexChange.observers.length决定的与nzType、nzSize、nzDirection等形态属性解耦所以只要订阅事件任何形态default、navigation、horizontal、vertical、small的步骤条都会自动变为可点击。其ant-steps-navigation样式类在 steps.component.ts 的宿主绑定中设置点击行为测试见 steps.spec.ts。六、相关 API 速查以下是nz-steps与可点击行为直接相关的 API完整定义见 doc/index.zh-CN.md 与 doc/index.en-US.mdnz-steps整体步骤条参数说明类型默认值[nzCurrent]指定当前步骤从 0 开始计数子步骤可通过nzStatus覆盖状态number0[nzDirection]步骤条方向horizontal/verticalvertical \| horizontalhorizontal[nzType]步骤条类型default/navigationdefault \| navigationdefault[nzSize]大小default/smallsmall \| defaultdefault[nzStartIndex]指定起始序号number0(nzIndexChange)点击单个步骤时触发的事件回传被点击步骤的索引number-nz-step单个步骤参数说明类型默认值[nzTitle]标题string \| TemplateRefvoid-[nzDescription]详情描述string \| TemplateRefvoid-[nzSubtitle]子标题string \| TemplateRefvoid-[nzStatus]指定状态未配置时由nzCurrent自动推导wait/process/finish/errorwait \| process \| finish \| errorwait[nzDisabled]禁用点击booleanfalse[nzPercentage]process 状态下步骤的进度百分比仅基础类型生效number-七、从源码视角理解整体调用链将上文串联起来可点击 Steps 的完整工作链路如下模板绑定(nzIndexChange)后EventEmitter产生观察者steps.component.ts 将每个nz-step标记为clickablestep.component.ts 据此为步骤容器添加rolebutton与tabindex0用户在 Zone 外部点击容器step.component.ts 的fromEventOutsideAngular捕获事件经filter校验三个条件可点击、非当前步骤、未禁用后向clickOutsideAngular$发出索引父组件用merge汇总所有步骤的点击流在存在观察者时通过ngZone.run重新进入 Angular Zone 并emit(index)应用层在onIndexChange中更新signal经由[nzCurrent]index()回写驱动步骤条刷新到新状态。其中第 4 步的ngZone.run是保证事件回传后变更检测能够正确执行的关键由于原生点击是在 Zone 之外监听的必须显式回到 Zone 内派发nzIndexChange的订阅回调中修改的信号值才能被框架及时感知。八、最佳实践小结受控索引始终让nzCurrent与组件状态绑定如signal点击事件只是提案最终索引由你在onIndexChange中决定是否采纳便于拦截非法跳转默认即联动不绑定(nzIndexChange)时步骤条保持纯展示无需额外开关绑定即获得键盘可达性tabindex0与语义化按钮可访问性开箱即用边界已知点击当前步骤不会触发事件禁用步骤既不可点击也不可聚焦复用性强horizontal / vertical / navigation / small 等任意形态均适用同一机制多个步骤条可共享同一个索引信号实现联动。如需查看可点击步骤条的完整演示源码与相关测试可进一步阅读 clickable.ts、clickable.md 以及 steps.spec.ts。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Anchor 横向导航模式实战nzDirectionhorizontal 用法与实现原理ng zorro antd Anchor 横向导航模式实战 nzDirectionhorizontal 用法与实现原理 导读 ng zorro antdUI组件前端ng-zorro-antd响应式导航实现移动端菜单适配ng zorro antd响应式导航实现移动端菜单适配 你是否在开发Angular应用时遇到过导航菜单在移动端显示混乱的问题本文将详细介绍如何使用ng zoUI组件前端antd-mobile Steps 步骤条组件详解状态推导、方向布局与样式定制antd mobile Steps 步骤条组件详解状态推导、方向布局与样式定制 Steps 步骤条是 antd mobile 中用于「引导用户按流程完成多步骤UI组件前端移动开发上一篇web-frameworks部署指南DockerPostgreSQL环境快速搭建下一篇终极Android APK签名神器uber-apk-signer一站式解决签名、对齐和验证难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考