UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文聚焦 ng-zorro-antd 的nz-spin组件内嵌模式Embedded mode / 卡片加载中——即把真实业务内容作为子节点放进nz-spin内让组件从「独立指示器」升级为「容器级加载遮罩」的核心用法。你将掌握内嵌模式的完整模板写法、nzSpinning/nzDelay/nzTip/nzSize等关键属性的底层行为并理解其背后的 Angular 组件实现与 Less 样式机制可直接迁移到列表、卡片、详情页等真实加载场景。一、什么是内嵌模式从「转圈」到「容器遮罩」nz-spin在 ng-zorro-antd 中属于「反馈Feedback」类组件见 组件文档用于页面和区块的加载中状态。它有两种截然不同的形态独立模式simple通过nzSimple开启只渲染一个转动的加载指示器本身不包裹任何内容适合按钮旁、表格内的小型 loading 指示内嵌模式嵌套加载nested-loading默认形态nzSimple为false把现有容器内容直接放进nz-spin标签内部加载时对整个内容区域施加模糊遮罩。这正是官方示例 nested.md 演示的「卡片加载中 / Embedded mode」。文档原文对该模式的描述非常精炼「可以直接把内容内嵌到nz-spin中将现有容器变为加载状态」Embedding content intonz-spinwill alter it into loading state。也就是说nz-spin不是和内容并排的两个元素而是内容的「外层包装容器」加载状态由它统一接管。对应示例代码位于 nested.ts完整可运行版本如下import { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzAlertModule } from ng-zorro-antd/alert; import { NzSpinModule } from ng-zorro-antd/spin; import { NzSwitchModule } from ng-zorro-antd/switch; Component({ selector: nz-demo-spin-nested, imports: [FormsModule, NzAlertModule, NzSpinModule, NzSwitchModule], template: nz-spin [nzSpinning]isSpinning() nz-alert nzTypeinfo nzMessageAlert message title nzDescriptionFurther details about the context of this alert. / /nz-spin br / div Loading state: nz-switch [(ngModel)]isSpinning / /div }) export class NzDemoSpinNestedComponent { readonly isSpinning signal(false); }该示例展示了内嵌模式的两个核心行为内容被包裹nz-alert卡片作为子节点嵌入nz-spin成为被加载保护的容器状态由开关驱动页面底部的nz-switch通过[(ngModel)]双向绑定isSpinning切换时即触发容器加载/恢复isSpinning使用 Angular 的signal实现响应式状态。在真实项目中这个isSpinning通常是异步请求进行中的标志位例如readonly loading signal(false); loadData(): void { this.loading.set(true); this.api.fetchList().subscribe({ next: data { /* 渲染数据 */ this.loading.set(false); }, error: () this.loading.set(false) }); }二、内嵌模式的实现原理模板结构与状态驱动要真正用好内嵌模式值得深入 spin.component.ts 看看它的模板与状态管理这能解释「为什么内容会被模糊、为什么延迟生效」。2.1 模板结构遮罩层 内容容器组件模板spin.component.ts的核心结构如下if (isLoading()) { div div classant-spin ant-spin-spinning [class.ant-spin-rtl]dir() rtl [class.ant-spin-lg]nzSize large [class.ant-spin-sm]nzSize small [class.ant-spin-show-text]nzTip ng-template [ngTemplateOutlet]nzIndicator || defaultTemplate / if (nzTip) { div classant-spin-text{{ nzTip }}/div } /div /div } if (!nzSimple) { div classant-spin-container [class.ant-spin-blur]isLoading() ng-content / /div }同时宿主元素上会挂载[class.ant-spin-nested-loading]!nzSimple时为 true。由此可以得到内嵌模式的关键结论加载指示器与内容分层渲染isLoading()为 true 时渲染一个绝对定位的遮罩层内含 4 个小圆点动画的ant-spin-dot见defaultTemplate内容则始终被包在ant-spin-container中nzSimple决定是否包裹nzSimple为 false默认时输出ant-spin-container与ng-content /这正是内嵌模式的载体为 true 时直接不渲染容器只留下指示器本身指示器可替换nzIndicator是TemplateRef类型的输入默认使用内置的 4 圆点动画也可以通过全局配置或属性注入自定义模板。2.2 加载状态不是简单的布尔透传值得注意内嵌模式呈现的模糊效果并非由nzSpinning直接驱动而是经过nzDelay防闪烁逻辑处理后的isLoadingsignal。组件内部spin.component.ts通过 RxJS 的BehaviorSubjectswitchMap组合实现nzSpinning变化写入spinning$nzDelay变化写入delay$当delay 0且处于 spinning 状态时延迟delay毫秒后再把 true 发出若在延迟窗口内 spinning 已经结束则直接发出 false——即「在nzDelay时间内结束的快速闪烁不会显示 loading 状态」对应官方延迟示例 delay-and-debounce.md最终结果写入isLoadingsignal驱动遮罩层与.ant-spin-blur类的切换。因此内嵌模式使用nzDelay的意义在于异步请求极快返回时避免用户看到「闪一下」的加载动画提升体验。示例见 delay-and-debounce.ts其用法只是在nz-spin上多一个属性nz-spin [nzSpinning]isSpinning() [nzDelay]500 nz-alert nzTypeinfo nzMessageAlert message title / /nz-spin三、内嵌模式的可配置参数一览以下参数定义以 组件文档 的 API 表为基准结合源码spin.component.ts逐一说明全部适用于内嵌模式参数说明类型默认值全局配置[nzSpinning]是否处于加载旋转状态booleantrue—[nzDelay]延迟显示加载效果的时间防止闪烁单位毫秒number0—[nzIndicator]自定义加载指示符TemplateRefvoid内置 4 圆点✅[nzSize]组件大小large \| small \| defaultdefault—[nzTip]当作为包裹元素时自定义描述文案stringnull—[nzSimple]是否不包裹子元素关闭内嵌模式booleanfalse—其中需要注意的两点nzSpinning默认值为true直接写nz-spin.../nz-spin不传任何属性时容器会立即处于加载状态若想默认展示内容必须显式绑定[nzSpinning]false或由业务状态驱动nzTip仅在内嵌模式有子元素时生效组件模板中ant-spin-text只有在nzTip非空时才渲染官方文档也注明它是「当作为包裹元素时」的描述文案。用法见 tip.tsnz-spin nzTipLoading... nz-alert nzTypeinfo nzMessageAlert message title / /nz-spin同时nzSize支持large/small两种放大缩小形态ant-spin-lg/ant-spin-sm类自定义指示器示例见 custom-indicator.ts通过ng-templatenzIndicator即可把图标库的nz-icon nzTypeloading注入为指示器。四、内嵌模式的样式机制模糊遮罩是如何实现的内嵌模式的视觉效果全部由 style/index.less 承担理解这些样式能帮你排查「为什么我的容器被模糊了」「遮罩层级在哪」等实际问题.ant-spin-nested-loadingindex.less宿主元素position: relative其内部的指示器层position: absolute覆盖整个容器top:0; left:0; width:100%; height:100%z-index: 4浮于内容之上转点.ant-spin-dot居中显示.ant-spin-containerindex.less内容容器position: relative并带::after伪元素遮罩默认opacity: 0、pointer-events: none.ant-spin-blurindex.less加载时追加到容器上将内容opacity: 0.5并禁用用户选择与指针事件user-select: none; pointer-events: none同时::after变为opacity: 0.4且pointer-events: auto——这就是「内容变模糊 不可交互」的来源尺寸适配-sm/-lg变体分别把转点圆点调整为 6px / 14pxindex.less并同步调整文字与圆点的垂直偏移保证不同尺寸下遮罩视觉居中。因此内嵌模式天然具备「加载时锁定交互」的能力加载期间用户无法点击容器内的按钮或链接避免重复请求。五、配套测试验证行为即规格仓库中的 spin.spec.ts 提供了内嵌模式行为的自动化验证。测试组件NzTestSpinBasicComponentspin.spec.ts一次性绑定了全部六个参数nzTip、nzSize、nzDelay、nzSpinning、nzSimple、nzIndicator并通过 signal 动态驱动覆盖了加载状态spinning切换时遮罩与文字的呈现例如断言.ant-spin-text的文案等于tip()spin.spec.tsnzDelay下快速切换不闪 loading 的时序行为nzSimple关闭包裹、nzIndicator自定义指示器、nzSize尺寸类名切换等分支。如果你在自定义封装nz-spin时不确定某个参数组合的行为直接参照该测试的绑定写法即可获得标准答案。六、实战小结三种常见内嵌场景的推荐写法结合官方示例与源码给出三个可直接复制的内嵌模式模板1. 卡片/区块加载默认无文案nz-spin [nzSpinning]loading() !-- 卡片内容 -- /nz-spin2. 带延迟防闪烁 描述文案的加载nz-spin [nzSpinning]loading() [nzDelay]300 nzTip数据加载中... !-- 列表内容 -- /nz-spin3. 自定义指示器引用 ng-zorro-antd 图标ng-template #indicatorTemplate nz-icon nzTypeloading / /ng-template nz-spin [nzSpinning]loading() [nzIndicator]indicatorTemplate !-- 详情内容 -- /nz-spin记住两条内嵌模式的核心准则子元素写在nz-spin内部即被容器接管加载状态加载时内容会模糊且不可交互这是由ant-spin-blur样式保证的。需要独立小指示器时再开启nzSimple两者互不冲突。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Spin 内嵌模式Embedded Mode实战将任意容器变为加载状态Ant Design Spin 内嵌模式Embedded Mode实战将任意容器变为加载状态 Spin 是 Ant Design 反馈类组件中用于承载“页前端UI组件设计系统ng-zorro-antd Spin 组件完全指南加载中状态的正确打开方式ng zorro antd Spin 组件完全指南加载中状态的正确打开方式 导读 本文基于 ng zorro antd 官方文档 components/spiUI组件前端ng-zorro-antd Button 加载中状态nzLoading完整实战指南ng zorro antd Button 加载中状态nzLoading完整实战指南 导读 在 Angular 应用中使用 ng zorro antd 的 BUI组件前端上一篇KubeEdge v1.20 新特性全解析批量节点运维、keadm ctl 边缘操作与 EdgeApplication 解耦下一篇如何5分钟掌握FanControlWindows终极风扇控制软件完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考