UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文聚焦 ng-zorro-antd 的nz-spin組件內(nèi)嵌模式Embedded mode / 卡片加載中——即把真實(shí)業(yè)務(wù)內(nèi)容作為子節(jié)點(diǎn)放進(jìn)nz-spin內(nèi)讓組件從「獨(dú)立指示器」升級(jí)為「容器級(jí)加載遮罩」的核心用法。你將掌握內(nèi)嵌模式的完整模板寫法、nzSpinning/nzDelay/nzTip/nzSize等關(guān)鍵屬性的底層行為并理解其背后的 Angular 組件實(shí)現(xiàn)與 Less 樣式機(jī)制可直接遷移到列表、卡片、詳情頁等真實(shí)加載場(chǎng)景。一、什么是內(nèi)嵌模式從「轉(zhuǎn)圈」到「容器遮罩」nz-spin在 ng-zorro-antd 中屬于「反饋Feedback」類組件見 組件文檔用于頁面和區(qū)塊的加載中狀態(tài)。它有兩種截然不同的形態(tài)獨(dú)立模式simple通過nzSimple開啟只渲染一個(gè)轉(zhuǎn)動(dòng)的加載指示器本身不包裹任何內(nèi)容適合按鈕旁、表格內(nèi)的小型 loading 指示內(nèi)嵌模式嵌套加載nested-loading默認(rèn)形態(tài)nzSimple為false把現(xiàn)有容器內(nèi)容直接放進(jìn)nz-spin標(biāo)簽內(nèi)部加載時(shí)對(duì)整個(gè)內(nèi)容區(qū)域施加模糊遮罩。這正是官方示例 nested.md 演示的「卡片加載中 / Embedded mode」。文檔原文對(duì)該模式的描述非常精煉「可以直接把內(nèi)容內(nèi)嵌到nz-spin中將現(xiàn)有容器變?yōu)榧虞d狀態(tài)」Embedding content intonz-spinwill alter it into loading state。也就是說nz-spin不是和內(nèi)容并排的兩個(gè)元素而是內(nèi)容的「外層包裝容器」加載狀態(tài)由它統(tǒng)一接管。對(duì)應(yīng)示例代碼位于 nested.ts完整可運(yùn)行版本如下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); }該示例展示了內(nèi)嵌模式的兩個(gè)核心行為內(nèi)容被包裹nz-alert卡片作為子節(jié)點(diǎn)嵌入nz-spin成為被加載保護(hù)的容器狀態(tài)由開關(guān)驅(qū)動(dòng)頁面底部的nz-switch通過[(ngModel)]雙向綁定isSpinning切換時(shí)即觸發(fā)容器加載/恢復(fù)isSpinning使用 Angular 的signal實(shí)現(xiàn)響應(yīng)式狀態(tài)。在真實(shí)項(xiàng)目中這個(gè)isSpinning通常是異步請(qǐng)求進(jìn)行中的標(biāo)志位例如readonly loading signal(false); loadData(): void { this.loading.set(true); this.api.fetchList().subscribe({ next: data { /* 渲染數(shù)據(jù) */ this.loading.set(false); }, error: () this.loading.set(false) }); }二、內(nèi)嵌模式的實(shí)現(xiàn)原理模板結(jié)構(gòu)與狀態(tài)驅(qū)動(dòng)要真正用好內(nèi)嵌模式值得深入 spin.component.ts 看看它的模板與狀態(tài)管理這能解釋「為什么內(nèi)容會(huì)被模糊、為什么延遲生效」。2.1 模板結(jié)構(gòu)遮罩層 內(nèi)容容器組件模板spin.component.ts的核心結(jié)構(gòu)如下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 }同時(shí)宿主元素上會(huì)掛載[class.ant-spin-nested-loading]!nzSimple時(shí)為 true。由此可以得到內(nèi)嵌模式的關(guān)鍵結(jié)論加載指示器與內(nèi)容分層渲染isLoading()為 true 時(shí)渲染一個(gè)絕對(duì)定位的遮罩層內(nèi)含 4 個(gè)小圓點(diǎn)動(dòng)畫的ant-spin-dot見defaultTemplate內(nèi)容則始終被包在ant-spin-container中nzSimple決定是否包裹nzSimple為 false默認(rèn)時(shí)輸出ant-spin-container與ng-content /這正是內(nèi)嵌模式的載體為 true 時(shí)直接不渲染容器只留下指示器本身指示器可替換nzIndicator是TemplateRef類型的輸入默認(rèn)使用內(nèi)置的 4 圓點(diǎn)動(dòng)畫也可以通過全局配置或?qū)傩宰⑷胱远x模板。2.2 加載狀態(tài)不是簡(jiǎn)單的布爾透?jìng)髦档米⒁鈨?nèi)嵌模式呈現(xiàn)的模糊效果并非由nzSpinning直接驅(qū)動(dòng)而是經(jīng)過nzDelay防閃爍邏輯處理后的isLoadingsignal。組件內(nèi)部spin.component.ts通過 RxJS 的BehaviorSubjectswitchMap組合實(shí)現(xiàn)nzSpinning變化寫入spinning$nzDelay變化寫入delay$當(dāng)delay 0且處于 spinning 狀態(tài)時(shí)延遲delay毫秒后再把 true 發(fā)出若在延遲窗口內(nèi) spinning 已經(jīng)結(jié)束則直接發(fā)出 false——即「在nzDelay時(shí)間內(nèi)結(jié)束的快速閃爍不會(huì)顯示 loading 狀態(tài)」對(duì)應(yīng)官方延遲示例 delay-and-debounce.md最終結(jié)果寫入isLoadingsignal驅(qū)動(dòng)遮罩層與.ant-spin-blur類的切換。因此內(nèi)嵌模式使用nzDelay的意義在于異步請(qǐng)求極快返回時(shí)避免用戶看到「閃一下」的加載動(dòng)畫提升體驗(yàn)。示例見 delay-and-debounce.ts其用法只是在nz-spin上多一個(gè)屬性nz-spin [nzSpinning]isSpinning() [nzDelay]500 nz-alert nzTypeinfo nzMessageAlert message title / /nz-spin三、內(nèi)嵌模式的可配置參數(shù)一覽以下參數(shù)定義以 組件文檔 的 API 表為基準(zhǔn)結(jié)合源碼spin.component.ts逐一說明全部適用于內(nèi)嵌模式參數(shù)說明類型默認(rèn)值全局配置[nzSpinning]是否處于加載旋轉(zhuǎn)狀態(tài)booleantrue—[nzDelay]延遲顯示加載效果的時(shí)間防止閃爍單位毫秒number0—[nzIndicator]自定義加載指示符TemplateRefvoid內(nèi)置 4 圓點(diǎn)?[nzSize]組件大小large \| small \| defaultdefault—[nzTip]當(dāng)作為包裹元素時(shí)自定義描述文案stringnull—[nzSimple]是否不包裹子元素關(guān)閉內(nèi)嵌模式booleanfalse—其中需要注意的兩點(diǎn)nzSpinning默認(rèn)值為true直接寫nz-spin.../nz-spin不傳任何屬性時(shí)容器會(huì)立即處于加載狀態(tài)若想默認(rèn)展示內(nèi)容必須顯式綁定[nzSpinning]false或由業(yè)務(wù)狀態(tài)驅(qū)動(dòng)nzTip僅在內(nèi)嵌模式有子元素時(shí)生效組件模板中ant-spin-text只有在nzTip非空時(shí)才渲染官方文檔也注明它是「當(dāng)作為包裹元素時(shí)」的描述文案。用法見 tip.tsnz-spin nzTipLoading... nz-alert nzTypeinfo nzMessageAlert message title / /nz-spin同時(shí)nzSize支持large/small兩種放大縮小形態(tài)ant-spin-lg/ant-spin-sm類自定義指示器示例見 custom-indicator.ts通過ng-templatenzIndicator即可把圖標(biāo)庫的nz-icon nzTypeloading注入為指示器。四、內(nèi)嵌模式的樣式機(jī)制模糊遮罩是如何實(shí)現(xiàn)的內(nèi)嵌模式的視覺效果全部由 style/index.less 承擔(dān)理解這些樣式能幫你排查「為什么我的容器被模糊了」「遮罩層級(jí)在哪」等實(shí)際問題.ant-spin-nested-loadingindex.less宿主元素position: relative其內(nèi)部的指示器層position: absolute覆蓋整個(gè)容器top:0; left:0; width:100%; height:100%z-index: 4浮于內(nèi)容之上轉(zhuǎn)點(diǎn).ant-spin-dot居中顯示.ant-spin-containerindex.less內(nèi)容容器position: relative并帶::after偽元素遮罩默認(rèn)opacity: 0、pointer-events: none.ant-spin-blurindex.less加載時(shí)追加到容器上將內(nèi)容opacity: 0.5并禁用用戶選擇與指針事件user-select: none; pointer-events: none同時(shí)::after變?yōu)閛pacity: 0.4且pointer-events: auto——這就是「內(nèi)容變模糊 不可交互」的來源尺寸適配-sm/-lg變體分別把轉(zhuǎn)點(diǎn)圓點(diǎn)調(diào)整為 6px / 14pxindex.less并同步調(diào)整文字與圓點(diǎn)的垂直偏移保證不同尺寸下遮罩視覺居中。因此內(nèi)嵌模式天然具備「加載時(shí)鎖定交互」的能力加載期間用戶無法點(diǎn)擊容器內(nèi)的按鈕或鏈接避免重復(fù)請(qǐng)求。五、配套測(cè)試驗(yàn)證行為即規(guī)格倉庫中的 spin.spec.ts 提供了內(nèi)嵌模式行為的自動(dòng)化驗(yàn)證。測(cè)試組件NzTestSpinBasicComponentspin.spec.ts一次性綁定了全部六個(gè)參數(shù)nzTip、nzSize、nzDelay、nzSpinning、nzSimple、nzIndicator并通過 signal 動(dòng)態(tài)驅(qū)動(dòng)覆蓋了加載狀態(tài)spinning切換時(shí)遮罩與文字的呈現(xiàn)例如斷言.ant-spin-text的文案等于tip()spin.spec.tsnzDelay下快速切換不閃 loading 的時(shí)序行為nzSimple關(guān)閉包裹、nzIndicator自定義指示器、nzSize尺寸類名切換等分支。如果你在自定義封裝nz-spin時(shí)不確定某個(gè)參數(shù)組合的行為直接參照該測(cè)試的綁定寫法即可獲得標(biāo)準(zhǔn)答案。六、實(shí)戰(zhàn)小結(jié)三種常見內(nèi)嵌場(chǎng)景的推薦寫法結(jié)合官方示例與源碼給出三個(gè)可直接復(fù)制的內(nèi)嵌模式模板1. 卡片/區(qū)塊加載默認(rèn)無文案nz-spin [nzSpinning]loading() !-- 卡片內(nèi)容 -- /nz-spin2. 帶延遲防閃爍 描述文案的加載nz-spin [nzSpinning]loading() [nzDelay]300 nzTip數(shù)據(jù)加載中... !-- 列表內(nèi)容 -- /nz-spin3. 自定義指示器引用 ng-zorro-antd 圖標(biāo)ng-template #indicatorTemplate nz-icon nzTypeloading / /ng-template nz-spin [nzSpinning]loading() [nzIndicator]indicatorTemplate !-- 詳情內(nèi)容 -- /nz-spin記住兩條內(nèi)嵌模式的核心準(zhǔn)則子元素寫在nz-spin內(nèi)部即被容器接管加載狀態(tài)加載時(shí)內(nèi)容會(huì)模糊且不可交互這是由ant-spin-blur樣式保證的。需要獨(dú)立小指示器時(shí)再開啟nzSimple兩者互不沖突。贊分享UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Ant Design Spin 內(nèi)嵌模式Embedded Mode實(shí)戰(zhàn)將任意容器變?yōu)榧虞d狀態(tài)Ant Design Spin 內(nèi)嵌模式Embedded Mode實(shí)戰(zhàn)將任意容器變?yōu)榧虞d狀態(tài) Spin 是 Ant Design 反饋類組件中用于承載“頁前端UI組件設(shè)計(jì)系統(tǒng)ng-zorro-antd Spin 組件完全指南加載中狀態(tài)的正確打開方式ng zorro antd Spin 組件完全指南加載中狀態(tài)的正確打開方式 導(dǎo)讀 本文基于 ng zorro antd 官方文檔 components/spiUI組件前端ng-zorro-antd Button 加載中狀態(tài)nzLoading完整實(shí)戰(zhàn)指南ng zorro antd Button 加載中狀態(tài)nzLoading完整實(shí)戰(zhàn)指南 導(dǎo)讀 在 Angular 應(yīng)用中使用 ng zorro antd 的 BUI組件前端上一篇KubeEdge v1.20 新特性全解析批量節(jié)點(diǎn)運(yùn)維、keadm ctl 邊緣操作與 EdgeApplication 解耦下一篇如何5分鐘掌握FanControlWindows終極風(fēng)扇控制軟件完全指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考