UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读在 Angular 应用中使用 ng-zorro-antd 的 Button 组件时nzLoading属性可以一键让按钮进入“加载中”状态按钮内自动渲染旋转的 loading 图标、文字前插入间隔、并且在加载期间拦截一切点击事件从根源上避免表单重复提交或操作被并发触发。本篇指南以官方演示 loading.md 与配套示例 loading.ts 为主体结合 button.component.ts 的源码实现与 button.spec.ts 的测试用例系统讲解nzLoading的静态用法、动态切换、圆形按钮适配以及其底层的事件拦截与图标替换原理。读完本文你将能够在自己项目中正确、安全地使用按钮加载状态并理解其背后的设计约束。一、nzLoading是什么一句话看懂用法按官方文档的表述“添加nzLoading属性即可让按钮处于加载状态”A loading indicator can be added to a button by setting thenzLoadingproperty on thenz-button。nz-button在 ng-zorro-antd 中是一个指令支持原生 button 的全部属性加载状态只是其众多能力中的一项。从 API 文档 可以看到nzLoading的完整定义属性说明类型默认值[nzLoading]设置按钮的加载状态booleanfalse在 button.component.ts 中该输入被声明为Input({ transform: booleanAttribute }) nzLoading: boolean false;这意味着默认值为false按钮处于可交互状态采用booleanAttribute转换因此写法上既可以写属性形式button nz-button nzLoading也可以写属性绑定形式[nzLoading]true两者等价与nzBlock、nzGhost、nzDanger一样属于布尔型开关见 button.component.ts。二、基本用法让按钮立即进入加载中状态最直接的用法是在按钮上静态设置nzLoading按钮一经渲染即处于加载中。官方演示 loading.ts 展示了两种形态button nz-button nzTypeprimary nzLoading nz-icon nzTypepoweroff / Loading /button button nz-button nzTypeprimary nzSizesmall nzLoadingLoading/button要点解读属性形式nzLoading等价于[nzLoading]true由booleanAttribute转换保证按钮内原有的图标如nz-icon nzTypepoweroff会被自动隐藏改为显示旋转的 loading 图标详见下文“图标替换原理”加载中按钮默认渲染为primary类型可与nzSizesmall、nzShapecircle等属性自由组合NzIconModule需要随组件一起导入因为 loading 图标本身就是一个nz-icon演示代码中imports: [NzButtonModule, NzIconModule]即为此目的。三、动态切换点击后进入加载、任务结束自动恢复更常见的业务场景是“点击提交 → 进入加载 → 请求完成后恢复”。官方演示的最后两个按钮演示了这一点loading.tsbutton nz-button nzTypeprimary [nzLoading]loadings()[0] (click)enterLoading(0)Click me!/button button nz-button nzTypeprimary [nzLoading]loadings()[1] (click)enterLoading(1) nz-icon nzTypepoweroff / Click me! /button对应的组件逻辑loading.ts使用了 Angular 的 signalreadonly loadings signalboolean[]([false, false]); enterLoading(index: number): void { const update (index: number, loading: boolean): void { this.loadings.update(loadings loadings.map((item, i) (i index ? loading : item))); }; update(index, true); setTimeout(() update(index, false), 3000); }这里的实现要点用signalboolean[]分别维护两个按钮的加载状态点击时通过enterLoading(index)将对应下标置为true示例中用setTimeout(..., 3000)模拟 3 秒异步任务任务结束后置回false真实项目中应把update(index, true)放在异步请求发起前把update(index, false)放在请求的finally回调中确保无论成功失败都能恢复按钮两个按钮状态互相独立可同时处于加载状态因此数组化管理比单个布尔值更贴合多按钮场景。四、圆形按钮Icon Only与加载状态当按钮只包含一个图标、不包含文字时nzLoading依然能正常工作且组件会自动识别为“仅图标”形态。官方演示loading.tsbutton nz-button nzLoading nzShapecircle/button button nz-button nzLoading nzTypeprimary nzShapecircle/button从源码看这类按钮会被同时加上ant-btn-circle与ant-btn-loading两个类见 button.component.tsloading 图标居中显示形成典型的圆形加载按钮。测试用例 button.spec.ts 专门验证了nzLoading与图标按钮的组合会正确得到ant-btn-icon-only类。五、源码原理一加载图标如何渲染nzLoading生效时按钮模板会额外渲染一个 loading 图标节点button.component.tstemplate: if (nzLoading) { span classant-btn-icon ant-btn-loading-icon nz-icon nzTypeloading / /span } ng-content / ,结合 button.component.ts 的 host 绑定[class.ant-btn-loading]: nzLoading当nzLoading为真时按钮元素获得ant-btn-loading类样式层通过旋转动画让ant-btn-loading-icon内的nz-icon持续转动模板中的ng-content /依然输出你写在按钮内部的内容文字、原有图标等但原有图标会被“隐藏替换”见下文由于nz-icon nzTypeloading本身是一个旋转动画图标所以无需额外 JS仅靠 CSS 即可呈现加载动效。六、源码原理二原有图标自动隐藏的机制细心的读者会发现第一个演示按钮里同时写了nz-icon nzTypepoweroff /但加载时显示的是 loading 图标而非 poweroff。这是通过loading$主题与内容子查询实现的button.component.tsngAfterContentInit(): void { this.loading$ .pipe( startWith(this.nzLoading), filter(() !!this.nzIconDirectiveElement), takeUntilDestroyed(this.destroyRef) ) .subscribe(loading { const nativeElement this.nzIconDirectiveElement.nativeElement; if (loading) { this.renderer.setStyle(nativeElement, display, none); } else { this.renderer.removeStyle(nativeElement, display); } }); }机制说明ContentChild(NzIconDirective, { read: ElementRef })捕获按钮内容中的第一个nz-icon元素button.component.tsngOnChanges中每次nzLoading变化都会向loading$主题推送新值button.component.ts加载时对原图标设置display: none恢复时移除该内联样式测试用例 button.spec.ts 完整验证了这一行为点击前 poweroff 图标可见、无ant-btn-loading类点击后出现ant-btn-loading-icon且 poweroff 元素内联样式变为display: none;计时器推进后一切恢复原状。七、源码原理三加载期间拦截点击杜绝重复提交nzLoading最实用的价值在于加载状态下按钮不可再被点击。这一点由构造函数中注册的捕获阶段事件监听保证button.component.tsfromEventOutsideAngularMouseEvent(this.elementRef.nativeElement, click, { capture: true }) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(event { if ((this.disabled (event.target as HTMLElement)?.tagName A) || this.nzLoading) { event.preventDefault(); event.stopImmediatePropagation(); } });关键行为事件监听注册在capture捕获阶段且运行在 Angular 变更检测之外因此拦截开销极小只要nzLoading为真点击事件会被preventDefault()阻止默认行为并用stopImmediatePropagation()阻止事件继续传播——业务侧绑定的(click)处理器不会被触发从根源上避免重复提交测试 button.spec.ts 明确断言按钮处于加载状态时点击preventDefault与stopImmediatePropagation各被调用一次同段逻辑也处理了 disabled 状态下a nz-button锚点按钮的点击拦截button.spec.ts 有对应锚点测试。八、与其他属性的组合实战建议nzLoading可与 Button 其余属性自由组合常用搭配如下属性完整定义见 API 文档组合典型场景示例nzLoadingnzTypeprimary表单主提交按钮加载中凸显主要动作button nz-button nzTypeprimary nzLoading提交中/buttonnzLoadingnzSizesmall列表行内操作按钮如“删除中”button nz-button nzSizesmall [nzLoading]delLoading删除/buttonnzLoadingnzShapecircle纯图标按钮如刷新、导出button nz-button nzShapecircle [nzLoading]refreshLoading/buttonnzLoadingnzDanger危险操作二次确认后的执行中状态button nz-button nzDanger [nzLoading]loading确认删除/buttonnzLoadingnzBlock占满整行的提交按钮button nz-button nzBlock nzTypeprimary [nzLoading]loading登录/button两个额外提示加载期间不必再手动加disablednzLoading已自带点击拦截二者语义重叠如果同时设置拦截逻辑同样生效样式一致性演示代码通过[nz-button] { margin-inline-end: 8px; margin-bottom: 12px; }统一了按钮间距loading.ts多按钮并排时建议保持类似约定避免加载图标切换时布局跳动。九、可继续深入阅读的仓库资源若希望进一步探究实现细节与更多按钮用法可在当前仓库中查阅以下文件示例实现components/button/demo/loading.ts本文全部代码示例来源组件源码components/button/button.component.tsnzLoading输入、模板渲染、点击拦截、图标替换的全部实现单元测试components/button/button.spec.tsloading 类名、图标隐藏、点击拦截的行为验证API 文档components/button/doc/index.en-US.mdnz-button全部属性、类型与默认值样式入口components/button/style/index.lessant-btn-loading相关视觉样式其他按钮演示components/button/demo/basic.ts五种类型按钮基础用法可对照学习赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Button 组件实战指南五种按钮类型与状态属性的完整解析ng zorro antd Button 组件实战指南五种按钮类型与状态属性的完整解析 本指南以 ng zorro antd 官方按钮基础示例 componeUI组件前端ng-zorro-antd 卡片预加载实战nz-card 的 nzLoading 加载占位与 Skeleton 骨架屏方案ng zorro antd 卡片预加载实战nz card 的 nzLoading 加载占位与 Skeleton 骨架屏方案 数据读入前展示加载占位是 AnguUI组件前端ng-zorro-antd Cascader 自定义校验状态nzStatus实战指南ng zorro antd Cascader 自定义校验状态nzStatus实战指南 nzStatus 是 ng zorro antd Cascader级UI组件前端上一篇WeChatMsg 微信聊天记录导出教程免费备份记录生成年度聊天报告下一篇技术解析Realtek RTL8821CU Linux无线网卡驱动架构与实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考