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)讀在 Angular 應(yīng)用中使用 ng-zorro-antd 的 Button 組件時(shí)nzLoading屬性可以一鍵讓按鈕進(jìn)入“加載中”狀態(tài)按鈕內(nèi)自動(dòng)渲染旋轉(zhuǎn)的 loading 圖標(biāo)、文字前插入間隔、并且在加載期間攔截一切點(diǎn)擊事件從根源上避免表單重復(fù)提交或操作被并發(fā)觸發(fā)。本篇指南以官方演示 loading.md 與配套示例 loading.ts 為主體結(jié)合 button.component.ts 的源碼實(shí)現(xiàn)與 button.spec.ts 的測(cè)試用例系統(tǒng)講解nzLoading的靜態(tài)用法、動(dòng)態(tài)切換、圓形按鈕適配以及其底層的事件攔截與圖標(biāo)替換原理。讀完本文你將能夠在自己項(xiàng)目中正確、安全地使用按鈕加載狀態(tài)并理解其背后的設(shè)計(jì)約束。一、nzLoading是什么一句話看懂用法按官方文檔的表述“添加nzLoading屬性即可讓按鈕處于加載狀態(tài)”A loading indicator can be added to a button by setting thenzLoadingproperty on thenz-button。nz-button在 ng-zorro-antd 中是一個(gè)指令支持原生 button 的全部屬性加載狀態(tài)只是其眾多能力中的一項(xiàng)。從 API 文檔 可以看到nzLoading的完整定義屬性說明類型默認(rèn)值[nzLoading]設(shè)置按鈕的加載狀態(tài)booleanfalse在 button.component.ts 中該輸入被聲明為Input({ transform: booleanAttribute }) nzLoading: boolean false;這意味著默認(rèn)值為false按鈕處于可交互狀態(tài)采用booleanAttribute轉(zhuǎn)換因此寫法上既可以寫屬性形式button nz-button nzLoading也可以寫屬性綁定形式[nzLoading]true兩者等價(jià)與nzBlock、nzGhost、nzDanger一樣屬于布爾型開關(guān)見 button.component.ts。二、基本用法讓按鈕立即進(jìn)入加載中狀態(tài)最直接的用法是在按鈕上靜態(tài)設(shè)置nzLoading按鈕一經(jīng)渲染即處于加載中。官方演示 loading.ts 展示了兩種形態(tài)button nz-button nzTypeprimary nzLoading nz-icon nzTypepoweroff / Loading /button button nz-button nzTypeprimary nzSizesmall nzLoadingLoading/button要點(diǎn)解讀屬性形式nzLoading等價(jià)于[nzLoading]true由booleanAttribute轉(zhuǎn)換保證按鈕內(nèi)原有的圖標(biāo)如nz-icon nzTypepoweroff會(huì)被自動(dòng)隱藏改為顯示旋轉(zhuǎn)的 loading 圖標(biāo)詳見下文“圖標(biāo)替換原理”加載中按鈕默認(rèn)渲染為primary類型可與nzSizesmall、nzShapecircle等屬性自由組合NzIconModule需要隨組件一起導(dǎo)入因?yàn)?loading 圖標(biāo)本身就是一個(gè)nz-icon演示代碼中imports: [NzButtonModule, NzIconModule]即為此目的。三、動(dòng)態(tài)切換點(diǎn)擊后進(jìn)入加載、任務(wù)結(jié)束自動(dòng)恢復(fù)更常見的業(yè)務(wù)場(chǎng)景是“點(diǎn)擊提交 → 進(jìn)入加載 → 請(qǐng)求完成后恢復(fù)”。官方演示的最后兩個(gè)按鈕演示了這一點(diǎn)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對(duì)應(yīng)的組件邏輯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); }這里的實(shí)現(xiàn)要點(diǎn)用signalboolean[]分別維護(hù)兩個(gè)按鈕的加載狀態(tài)點(diǎn)擊時(shí)通過enterLoading(index)將對(duì)應(yīng)下標(biāo)置為true示例中用setTimeout(..., 3000)模擬 3 秒異步任務(wù)任務(wù)結(jié)束后置回false真實(shí)項(xiàng)目中應(yīng)把update(index, true)放在異步請(qǐng)求發(fā)起前把update(index, false)放在請(qǐng)求的finally回調(diào)中確保無論成功失敗都能恢復(fù)按鈕兩個(gè)按鈕狀態(tài)互相獨(dú)立可同時(shí)處于加載狀態(tài)因此數(shù)組化管理比單個(gè)布爾值更貼合多按鈕場(chǎng)景。四、圓形按鈕Icon Only與加載狀態(tài)當(dāng)按鈕只包含一個(gè)圖標(biāo)、不包含文字時(shí)nzLoading依然能正常工作且組件會(huì)自動(dòng)識(shí)別為“僅圖標(biāo)”形態(tài)。官方演示loading.tsbutton nz-button nzLoading nzShapecircle/button button nz-button nzLoading nzTypeprimary nzShapecircle/button從源碼看這類按鈕會(huì)被同時(shí)加上ant-btn-circle與ant-btn-loading兩個(gè)類見 button.component.tsloading 圖標(biāo)居中顯示形成典型的圓形加載按鈕。測(cè)試用例 button.spec.ts 專門驗(yàn)證了nzLoading與圖標(biāo)按鈕的組合會(huì)正確得到ant-btn-icon-only類。五、源碼原理一加載圖標(biāo)如何渲染nzLoading生效時(shí)按鈕模板會(huì)額外渲染一個(gè) loading 圖標(biāo)節(jié)點(diǎn)button.component.tstemplate: if (nzLoading) { span classant-btn-icon ant-btn-loading-icon nz-icon nzTypeloading / /span } ng-content / ,結(jié)合 button.component.ts 的 host 綁定[class.ant-btn-loading]: nzLoading當(dāng)nzLoading為真時(shí)按鈕元素獲得ant-btn-loading類樣式層通過旋轉(zhuǎn)動(dòng)畫讓ant-btn-loading-icon內(nèi)的nz-icon持續(xù)轉(zhuǎn)動(dòng)模板中的ng-content /依然輸出你寫在按鈕內(nèi)部的內(nèi)容文字、原有圖標(biāo)等但原有圖標(biāo)會(huì)被“隱藏替換”見下文由于nz-icon nzTypeloading本身是一個(gè)旋轉(zhuǎn)動(dòng)畫圖標(biāo)所以無需額外 JS僅靠 CSS 即可呈現(xiàn)加載動(dòng)效。六、源碼原理二原有圖標(biāo)自動(dòng)隱藏的機(jī)制細(xì)心的讀者會(huì)發(fā)現(xiàn)第一個(gè)演示按鈕里同時(shí)寫了nz-icon nzTypepoweroff /但加載時(shí)顯示的是 loading 圖標(biāo)而非 poweroff。這是通過loading$主題與內(nèi)容子查詢實(shí)現(xiàn)的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); } }); }機(jī)制說明ContentChild(NzIconDirective, { read: ElementRef })捕獲按鈕內(nèi)容中的第一個(gè)nz-icon元素button.component.tsngOnChanges中每次nzLoading變化都會(huì)向loading$主題推送新值button.component.ts加載時(shí)對(duì)原圖標(biāo)設(shè)置display: none恢復(fù)時(shí)移除該內(nèi)聯(lián)樣式測(cè)試用例 button.spec.ts 完整驗(yàn)證了這一行為點(diǎn)擊前 poweroff 圖標(biāo)可見、無ant-btn-loading類點(diǎn)擊后出現(xiàn)ant-btn-loading-icon且 poweroff 元素內(nèi)聯(lián)樣式變?yōu)閐isplay: none;計(jì)時(shí)器推進(jìn)后一切恢復(fù)原狀。七、源碼原理三加載期間攔截點(diǎn)擊杜絕重復(fù)提交nzLoading最實(shí)用的價(jià)值在于加載狀態(tài)下按鈕不可再被點(diǎn)擊。這一點(diǎn)由構(gòu)造函數(shù)中注冊(cè)的捕獲階段事件監(jiān)聽保證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(); } });關(guān)鍵行為事件監(jiān)聽注冊(cè)在capture捕獲階段且運(yùn)行在 Angular 變更檢測(cè)之外因此攔截開銷極小只要nzLoading為真點(diǎn)擊事件會(huì)被preventDefault()阻止默認(rèn)行為并用stopImmediatePropagation()阻止事件繼續(xù)傳播——業(yè)務(wù)側(cè)綁定的(click)處理器不會(huì)被觸發(fā)從根源上避免重復(fù)提交測(cè)試 button.spec.ts 明確斷言按鈕處于加載狀態(tài)時(shí)點(diǎn)擊preventDefault與stopImmediatePropagation各被調(diào)用一次同段邏輯也處理了 disabled 狀態(tài)下a nz-button錨點(diǎn)按鈕的點(diǎn)擊攔截button.spec.ts 有對(duì)應(yīng)錨點(diǎn)測(cè)試。八、與其他屬性的組合實(shí)戰(zhàn)建議nzLoading可與 Button 其余屬性自由組合常用搭配如下屬性完整定義見 API 文檔組合典型場(chǎng)景示例nzLoadingnzTypeprimary表單主提交按鈕加載中凸顯主要?jiǎng)幼鱞utton nz-button nzTypeprimary nzLoading提交中/buttonnzLoadingnzSizesmall列表行內(nèi)操作按鈕如“刪除中”button nz-button nzSizesmall [nzLoading]delLoading刪除/buttonnzLoadingnzShapecircle純圖標(biāo)按鈕如刷新、導(dǎo)出button nz-button nzShapecircle [nzLoading]refreshLoading/buttonnzLoadingnzDanger危險(xiǎn)操作二次確認(rèn)后的執(zhí)行中狀態(tài)button nz-button nzDanger [nzLoading]loading確認(rèn)刪除/buttonnzLoadingnzBlock占滿整行的提交按鈕button nz-button nzBlock nzTypeprimary [nzLoading]loading登錄/button兩個(gè)額外提示加載期間不必再手動(dòng)加disablednzLoading已自帶點(diǎn)擊攔截二者語義重疊如果同時(shí)設(shè)置攔截邏輯同樣生效樣式一致性演示代碼通過[nz-button] { margin-inline-end: 8px; margin-bottom: 12px; }統(tǒng)一了按鈕間距l(xiāng)oading.ts多按鈕并排時(shí)建議保持類似約定避免加載圖標(biāo)切換時(shí)布局跳動(dòng)。九、可繼續(xù)深入閱讀的倉庫資源若希望進(jìn)一步探究實(shí)現(xiàn)細(xì)節(jié)與更多按鈕用法可在當(dāng)前倉庫中查閱以下文件示例實(shí)現(xiàn)components/button/demo/loading.ts本文全部代碼示例來源組件源碼components/button/button.component.tsnzLoading輸入、模板渲染、點(diǎn)擊攔截、圖標(biāo)替換的全部實(shí)現(xiàn)單元測(cè)試components/button/button.spec.tsloading 類名、圖標(biāo)隱藏、點(diǎn)擊攔截的行為驗(yàn)證API 文檔components/button/doc/index.en-US.mdnz-button全部屬性、類型與默認(rèn)值樣式入口components/button/style/index.lessant-btn-loading相關(guān)視覺樣式其他按鈕演示components/button/demo/basic.ts五種類型按鈕基礎(chǔ)用法可對(duì)照學(xué)習(xí)贊分享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)推薦ng-zorro-antd Button 組件實(shí)戰(zhàn)指南五種按鈕類型與狀態(tài)屬性的完整解析ng zorro antd Button 組件實(shí)戰(zhàn)指南五種按鈕類型與狀態(tài)屬性的完整解析 本指南以 ng zorro antd 官方按鈕基礎(chǔ)示例 componeUI組件前端ng-zorro-antd 卡片預(yù)加載實(shí)戰(zhàn)nz-card 的 nzLoading 加載占位與 Skeleton 骨架屏方案ng zorro antd 卡片預(yù)加載實(shí)戰(zhàn)nz card 的 nzLoading 加載占位與 Skeleton 骨架屏方案 數(shù)據(jù)讀入前展示加載占位是 AnguUI組件前端ng-zorro-antd Cascader 自定義校驗(yàn)狀態(tài)nzStatus實(shí)戰(zhàn)指南ng zorro antd Cascader 自定義校驗(yàn)狀態(tài)nzStatus實(shí)戰(zhàn)指南 nzStatus 是 ng zorro antd Cascader級(jí)UI組件前端上一篇WeChatMsg 微信聊天記錄導(dǎo)出教程免費(fèi)備份記錄生成年度聊天報(bào)告下一篇技術(shù)解析Realtek RTL8821CU Linux無線網(wǎng)卡驅(qū)動(dòng)架構(gòu)與實(shí)現(xiàn)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考