UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd 的 Upload 组件中文件列表默认展示的预览、删除、下载操作图标以及文件名称旁的信息都是内置固定的。但在真实业务里我们往往需要把删除图标换成自定义样式、在文件旁追加“文件大小”“上传时间”等额外信息。本指南以仓库自带演示 custom-action-icon.md 与其配套实现 custom-action-icon.ts 为主体深入讲解如何通过nzShowUploadList传入模板对象来自定义操作图标与文件额外信息并结合 upload-list.component.html、interface.ts 与 upload-list.spec.ts 的源码实现让你理解自定义背后完整的渲染链路与可用的进阶能力。演示功能概览官方演示的核心只有一句话通过nzShowUploadList自定义操作图标和文件的额外信息。展开后它实现了三件事为每个文件项额外显示(文件大小 KB)这样的附加文本将下载、删除、预览三个操作按钮的默认图标分别替换为snippets、github、apple图标通过预设的nzFileList包含 done / error 状态的文件演示这些自定义内容在真实列表中的呈现位置。nzShowUploadList 的类型与字段nzShowUploadList是 Upload 组件的输入属性既支持布尔值控制列表整体显隐也支持传入一个对象做精细化定制。其类型定义位于 interface.tsexport type NzShowUploadListIcon boolean | ((file: NzUploadFile) boolean); export interface NzShowUploadList { showRemoveIcon?: NzShowUploadListIcon; showPreviewIcon?: NzShowUploadListIcon; showDownloadIcon?: NzShowUploadListIcon; extra?: TemplateRef{ $implicit: NzUploadFile }; downloadIcon?: TemplateRef{ $implicit: NzUploadFile }; removeIcon?: TemplateRef{ $implicit: NzUploadFile }; previewIcon?: TemplateRef{ $implicit: NzUploadFile }; }各字段含义如下字段类型作用extraTemplateRef{ $implicit: NzUploadFile }文件名称旁追加的额外信息模板上下文隐式变量为当前文件对象downloadIconTemplateRef{ $implicit: NzUploadFile }自定义下载操作图标模板removeIconTemplateRef{ $implicit: NzUploadFile }自定义删除操作图标模板previewIconTemplateRef{ $implicit: NzUploadFile }自定义预览操作图标模板主要作用于picture-card列表样式showRemoveIcon/showPreviewIcon/showDownloadIconboolean \| ((file: NzUploadFile) boolean)控制对应图标的显隐支持布尔值也支持按文件动态判断的函数需要特别注意的是四个图标模板的隐式上下文$implicit都是当前NzUploadFile文件对象因此模板内部可以直接访问file.name、file.size、file.status、file.url、file.response等字段——这正是示例中extra模板能显示文件大小的前提。此外upload.component.ts 中的输入 setter 显示当传入的是布尔值true时组件会将其展开为默认对象{ showPreviewIcon: true, showRemoveIcon: true, showDownloadIcon: true }false则直接隐藏整个上传列表。演示代码逐段解析1. 组件骨架与信号式写法演示组件位于 custom-action-icon.ts它采用了 Angular 最新的 signal 风格 APIsignal、computed、viewChildComponent({ selector: nz-demo-upload-custom-action-icon, imports: [NzUploadModule, NzIconModule, NzButtonModule], template: nz-upload [nzShowUploadList]showUploadList() [nzFileList]fileList() button nz-buttonUpload/button /nz-upload ... }) export class NzDemoUploadCustomActionIconComponent { protected readonly downloadIcon viewChildTemplateRef{ $implicit: NzUploadFile }(downloadIcon); protected readonly removeIcon viewChildTemplateRef{ $implicit: NzUploadFile }(removeIcon); protected readonly previewIcon viewChildTemplateRef{ $implicit: NzUploadFile }(previewIcon); protected readonly extra viewChildTemplateRef{ $implicit: NzUploadFile }(extra); ... }三个要点值得关注模板引用通过viewChild获取四个ng-template#extra、#downloadIcon、#removeIcon、#previewIcon定义在组件模板中通过viewChild信号读取对应的TemplateRef再组装进nzShowUploadList对象。computed派生配置对象showUploadList是一个computed内部依赖四个模板引用信号任何模板引用变化都会触发配置对象重建。模块引入NzUploadModule组件本体、NzIconModule图标渲染、NzButtonModule操作按钮样式缺一不可。2. 模板定义额外信息与三个自定义图标ng-template #extra let-file span({{ file.size }} KB)/span /ng-template ng-template #downloadIconnz-icon nzTypesnippets //ng-template ng-template #removeIconnz-icon nzTypegithub //ng-template ng-template #previewIconnz-icon nzTypeapple //ng-templateextra模板通过let-file接收隐式上下文$implicit即当前文件对象渲染出(100 KB)、(200 KB)这样的附加文本其余三个模板则直接返回自定义的nz-icon。示例故意选用了github、apple等非常规图标目的就是让你直观看到“图标完全可替换”。computed将四者打包protected readonly showUploadList computed(() ({ extra: this.extra(), downloadIcon: this.downloadIcon(), removeIcon: this.removeIcon(), previewIcon: this.previewIcon(), showRemoveIcon: true, showPreviewIcon: true, showDownloadIcon: true }));3. 预设文件列表protected readonly fileList signalNzUploadFile[]([ { uid: 1, name: xxx.png, status: done, size: 100, response: Server Error 500, // custom error message to show url: http://www.baidu.com/xxx.png }, { uid: 2, name: yyy.png, size: 200, status: done, url: http://www.baidu.com/yyy.png }, { uid: 3, name: zzz.png, size: 300, status: error, response: Server Error 500, // custom error message to show url: http://www.baidu.com/zzz.png } ]);这里有一个容易被忽略的细节response字段承担了错误消息的展示职责。在 upload-list.component.ts 的genErr方法中private genErr(file: NzUploadFile): string { if (file.response typeof file.response string) { return file.response; } return (file.error file.error.statusText) || this.locale.uploadError; }当status为error时列表项会通过 upload-list.component.html 中的nz-tooltip把file.message作为提示文案展示而file.message正是由genErr生成的。因此把response写成Server Error 500的字符串悬停错误文件时就能看到这条自定义错误信息。源码级原理自定义模板如何被渲染渲染入口与默认回退自定义图标模板的消费方是内部组件NzUploadListComponentnz-upload-list。在其模板 upload-list.component.html 中删除按钮第 69-87 行若file.showRemove为真则渲染按钮按钮内部if (icons.removeIcon)命中时通过ngTemplateOutlet渲染自定义模板并传入{ $implicit: file }上下文否则回退到默认的nz-icon nzTypedelete /。下载按钮第 89-107 行逻辑与删除一致默认回退图标为nzTypedownload同样以$implicit: file作为上下文。预览图标第 167-172 行主要出现在picture-card列表样式的悬停操作区命中icons.previewIcon时渲染自定义模板默认回退为nz-icon nzTypeeye /。额外信息第 118-124 行命中icons.extra时在ant-upload-list-item-extra容器中渲染模板插入位置在文件名称之后。这段模板代码印证了接口定义每个自定义模板都通过NgTemplateOutletNgTemplateOutletContext注入$implicit: file这正是演示中let-file能取到文件对象、{{ file.size }}能渲染出数值的机制来源。图标显隐的计算规则在 upload-list.component.ts 的fixData方法中private resolveShowIcon(showIcon: NzShowUploadListIcon | undefined, file: NzUploadFile): boolean { if (!showIcon) { return false; } return typeof showIcon function ? showIcon(file) : showIcon; } private fixData(): void { this.list.forEach(file { ... file.showDownload this.resolveShowIcon(this.icons.showDownloadIcon, file) file.status done; file.showRemove this.resolveShowIcon(this.icons.showRemoveIcon, file); file.showPreview this.resolveShowIcon(this.icons.showPreviewIcon, file); }); }三个值得记住的实现事实showRemoveIcon/showPreviewIcon/showDownloadIcon若传函数组件会以当前文件为入参调用它从而支持按文件条件显隐图标showDownloadIcon额外受file.status done约束——只有上传成功的文件才显示下载按钮这就是演示中三个文件都能看到下载按钮均为 done的原因未显式配置的 show 字段会按false处理resolveShowIcon对空值返回false因此当你以对象形式传nzShowUploadList时记得把需要的显隐开关显式置为true否则对应操作图标不会出现。测试用例佐证upload-list.spec.ts 为这些规则提供了可验证的测试showRemoveIcon: (file) file.status done时3 个文件中只有 2 个 done 文件出现删除按钮expect(deleteIcons.length).toBe(2)showDownloadIcon: (file) file.name xxx.png时仅xxx.png一个文件出现下载图标expect(downloadIcons.length).toBe(1)showPreviewIcon: false时操作区的a预览链接数量为 0。这些用例从侧面验证了“函数谓词 done 状态约束 显隐开关”三者的组合行为可作为你自行实现按文件定制操作项时的行为参照。完整可运行示例把上述片段整合即得到一个可直接运行的独立组件行为与官方演示一致import { Component, computed, signal, TemplateRef, viewChild } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzIconModule } from ng-zorro-antd/icon; import { NzUploadFile, NzUploadModule } from ng-zorro-antd/upload; Component({ selector: app-upload-custom-action-icon, imports: [NzUploadModule, NzIconModule, NzButtonModule], template: nz-upload [nzShowUploadList]showUploadList() [nzFileList]fileList() button nz-buttonUpload/button /nz-upload ng-template #extra let-file span({{ file.size }} KB)/span /ng-template ng-template #downloadIconnz-icon nzTypesnippets //ng-template ng-template #removeIconnz-icon nzTypegithub //ng-template ng-template #previewIconnz-icon nzTypeapple //ng-template }) export class UploadCustomActionIconComponent { protected readonly downloadIcon viewChildTemplateRef{ $implicit: NzUploadFile }(downloadIcon); protected readonly removeIcon viewChildTemplateRef{ $implicit: NzUploadFile }(removeIcon); protected readonly previewIcon viewChildTemplateRef{ $implicit: NzUploadFile }(previewIcon); protected readonly extra viewChildTemplateRef{ $implicit: NzUploadFile }(extra); protected readonly fileList signalNzUploadFile[]([ { uid: 1, name: xxx.png, status: done, size: 100, response: Server Error 500, url: http://www.baidu.com/xxx.png }, { uid: 2, name: yyy.png, size: 200, status: done, url: http://www.baidu.com/yyy.png }, { uid: 3, name: zzz.png, size: 300, status: error, response: Server Error 500, url: http://www.baidu.com/zzz.png } ]); protected readonly showUploadList computed(() ({ extra: this.extra(), downloadIcon: this.downloadIcon(), removeIcon: this.removeIcon(), previewIcon: this.previewIcon(), showRemoveIcon: true, showPreviewIcon: true, showDownloadIcon: true })); }运行前提与注意事项组件所在的模块需引入NzUploadModule、NzIconModule、NzButtonModule演示源码 imports 已给出并在imports数组中声明当前仓库的演示代码采用独立组件 imports数组的写法演示使用的是静态nzFileList因此不会真正发起上传请求若改为动态上传file.size在uploading阶段可能为空extra模板需做好空值兜底如{{ file.size ?? - }}由于三个自定义图标使用了github、apple等图标若你照搬这段代码请确保项目已动态引入对应图标ng-zorro-antd 图标支持按需加载见 icon 模块。进阶按文件动态显隐操作图标除静态模板外nzShowUploadList还支持函数形式的显隐开关实现更细粒度的控制例如“只允许删除上传成功的文件”“只对指定文件显示下载”nz-upload [nzShowUploadList]{ showRemoveIcon: (file) file.status done, showDownloadIcon: (file) file.name.endsWith(.png), showPreviewIcon: true } [nzFileList]fileList() button nz-buttonUpload/button /nz-upload对应的组件类型定义见 interface.tsNzShowUploadListIcon boolean | ((file: NzUploadFile) boolean)实现行为在 upload-list.component.ts 的resolveShowIcon/fixData中与 upload-list.spec.ts 的测试断言完全一致。小结nzShowUploadList是 ng-zorro-antd Upload 组件中控制文件列表形态的“总开关 定制面板”布尔值控制列表显隐对象形态则通过四个TemplateRefextra、downloadIcon、removeIcon、previewIcon与三个显隐开关showRemoveIcon、showPreviewIcon、showDownloadIcon实现操作图标、额外信息的完全自定义。所有模板都注入$implicit: NzUploadFile上下文让你能基于每个文件的真实数据渲染内容显隐开关还支持函数谓词按文件逐个判定。理解了 interface.ts、upload-list.component.html 与 upload-list.component.ts 的协作关系后无论是换图标、加文件信息还是实现复杂的按文件差异化操作都可以在 Upload 列表层轻松落地。更多 Upload 参数与回调细节可参考 Upload 官方文档 或查看其余演示如 picture-card.md、preview-file.md。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Hermes Agent技术融合重构云原生AI架构的新范式Hermes Agent技术融合重构云原生AI架构的新范式 在AI驱动的数字化转型浪潮中技术架构师面临着一个核心挑战如何在保持系统弹性的同时实现AI能力UI组件前端ng-zorro-antd Spin 组件自定义指示符nzIndicator实战指南ng zorro antd Spin 组件自定义指示符nzIndicator实战指南 加载动效Spin是 Angular 应用中缓解用户等待焦虑的关键反UI组件前端ng-zorro-antd Notification 自定义操作按钮nzButton实战指南ng zorro antd Notification 自定义操作按钮nzButton实战指南 本文聚焦 ng zorro antd 通知提醒框NotifiUI组件前端上一篇Keystone 字段默认值实战指南从静态 defaultValue 到动态 resolveInput 钩子下一篇douyin-downloader 实战从安装到抖音无水印批量下载的完整落地创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考