ng-zorro-antd Comment 评论组件实战：配合 nz-list 构建可扩展的评论列表

• UI组件
• 前端

本指南基于 ng-zorro-antd 官方演示 配合列表组件（Usage with list），系统讲解如何将nz-comment评论组件与nz-list列表组件组合，以数据驱动的方式渲染评论列表。读完本文，你将掌握nz-list的nzDataSource/nzRenderItem渲染机制、nz-comment的完整 API 用法，以及如何在评论列表上叠加操作项、嵌套回复等实战能力。

一、为什么用列表组件承载评论

在真实产品中，评论区几乎不会只有单条评论，而是"一页评论的集合"。ng-zorro-antd 的官方演示正是采用nz-list作为容器：列表负责数据的批量渲染与布局管理，nz-comment负责单条评论的内容结构（头像、作者、时间、正文、操作项），两者各司其职、组合即用。

从源码看，nz-comment本身并不关心数据的来源与数量，它只负责渲染"一条评论"的 DOM 结构（见 comment.component.ts）；而nz-list提供的是"如何遍历数据并渲染每一项"的通用能力（见 list.component.ts）。把数据迭代交给列表、把单条展示交给评论，是这套组合最核心的协作模型。

二、完整示例：数据驱动的评论列表

官方演示 list.ts 展示了最小可用的组合代码，下面完整给出并逐步拆解：

import { Component, signal } from '@angular/core'; import { addDays, formatDistance } from 'date-fns'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzCommentModule } from 'ng-zorro-antd/comment'; import { NzListModule } from 'ng-zorro-antd/list'; @Component({ selector: 'nz-demo-comment-list', imports: [NzAvatarModule, NzCommentModule, NzListModule], template: ` <nz-list [nzDataSource]="data()" [nzRenderItem]="item" nzItemLayout="horizontal"> <ng-template #item let-item> <nz-comment [nzAuthor]="item.author" [nzDatetime]="item.datetime"> <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.avatar" /> <nz-comment-content> <p>{{ item.content }}</p> </nz-comment-content> <nz-comment-action>Reply to</nz-comment-action> </nz-comment> </ng-template> </nz-list> ` }) export class NzDemoCommentListComponent { readonly data = signal([ { author: 'Han Solo', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'We supply a series of design principles, practical patterns and high quality design resources' + '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', datetime: formatDistance(new Date(), addDays(new Date(), 1)) }, { author: 'Han Solo', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'We supply a series of design principles, practical patterns and high quality design resources' + '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', datetime: formatDistance(new Date(), addDays(new Date(), 2)) } ]); }

运行前提：组件通过imports引入NzAvatarModule、NzCommentModule、NzListModule三个模块；时间格式化使用了date-fns的formatDistance/addDays，请在项目中安装date-fns依赖。

三、nz-list 侧的渲染机制

nz-list是本例的"数据发动机"，需要理解三个关键输入（均可在 list.component.ts 中找到定义）：

• nzDataSource：数据源数组，类型为NzSafeAny[]，这里由data()signal 提供。
• nzRenderItem：一个TemplateRef，模板上下文为{ $implicit: item, index: $index }，即模板中let-item拿到的就是数组里的当前元素。
• nzItemLayout：布局方向，取值'horizontal'（默认）或'vertical'，评论列表通常使用horizontal。

从源码实现看，nz-list在模板内部通过@for (item of nzDataSource; track item)遍历数据，并把每一项交给nzRenderItem对应的ng-template渲染（list.component.ts）。这意味着：

• 列表项完全由你控制的模板决定，nz-comment可以无缝嵌入其中；
• 数据源更新（signal 或普通数组变更）会触发列表自动重渲染，非常适合接入服务端分页加载评论的场景；
• 当nzDataSource为空且未加载时，列表会自动渲染内置的空状态（nz-list-empty），无需额外处理空数组分支。

四、nz-comment 侧的 API 与结构

nz-comment的完整 API 定义在 doc/index.en-US.md，核心参数如下：

除了这两个输入属性，评论组件还通过"内容子指令"来组织内部结构：

• nz-comment-avatar：必须作用在nz-avatar元素上（选择器为nz-avatar[nz-comment-avatar]），用于渲染头像区；
• nz-comment-content：评论正文内容区；
• nz-comment-action：评论内容下方呈现的操作项（如 "Reply to"、点赞/点踩），支持多个。

结构源码印证

在 comment.component.ts 的模板中，nz-comment的 DOM 骨架为：

<div class="ant-comment-inner"> <div class="ant-comment-avatar">…头像…</div> <div class="ant-comment-content"> <div class="ant-comment-content-author"> <span class="ant-comment-content-author-name">…nzAuthor…</span> <span class="ant-comment-content-author-time">…nzDatetime…</span> </div> <ng-content select="nz-comment-content" /> <ul class="ant-comment-actions">…nz-comment-action 列表…</ul> </div> </div> <div class="ant-comment-nested">…嵌套内容…</div>

几个值得注意的源码细节：

1. nzAuthor与nzDatetime都通过*nzStringTemplateOutlet渲染，所以既可以直接传字符串，也可以传TemplateRef<void>做富文本定制。
2. 操作项通过@ContentChildren(CommentAction)收集，只有存在nz-comment-action时才渲染ant-comment-actions列表。
3. ant-comment-nested区块用于承载嵌套回复，这正是"回复树"实现的基础。

操作项的实现原理

在 comment-cells.ts 中，NzCommentActionComponent将自身内容包进ng-template，再封装为TemplatePortal；组件模板里通过nzCommentActionHost指令（继承自 CDK 的CdkPortalOutlet）将 Portal 挂载到<li>中。因此nz-comment-action内可以放任意内容——图标、按钮、点击事件都支持，且不影响外层布局。

五、在列表场景中的进阶能力

掌握了nz-list+nz-comment的组合模式后，可以进一步扩展出更完整的功能：

5.1 交互式操作项

参考 basic.ts，在nz-comment-action中放入带点击事件的图标即可实现点赞/点踩：

<nz-comment-action> <nz-icon nz-tooltip nzTooltipTitle="Like" nzType="like" [nzTheme]="likes() > 0 ? 'twotone' : 'outline'" (click)="like()" /> <span class="count like">{{ likes() }}</span> </nz-comment-action>

通过 signal 状态（如likes()/dislikes()）控制主题色与计数，完全由业务层决定交互逻辑，组件本身不做任何假定。

5.2 嵌套回复树

参考 nested.ts，利用ant-comment-nested插槽递归渲染子评论：定义一个#commentTemplateRef模板，在nz-comment内部用ng-template递归渲染comment.children，即可生成多级回复结构。这套写法同样可以套用在nz-list的nzRenderItem中，实现"评论 + 回复树"的一体化列表。

5.3 评论编辑框

仓库还提供了编辑器演示 editor.ts，展示了头像 + 文本域 + 提交按钮的评论输入区，可作为列表上方"发表评论"入口的参考实现。

六、小结

nz-list与nz-comment的组合是 ng-zorro-antd 评论区场景的标准解法：

• 容器层：nz-list用nzDataSource+nzRenderItem完成数据遍历与项模板注入，天然支持 loading、空态、分页、加载更多（nzLoadMore、nzPagination）等列表能力；
• 内容层：nz-comment用nzAuthor、nzDatetime及三个内容指令（avatar/content/action）完成单条评论的语义化渲染，并保留ant-comment-nested用于嵌套回复；
• 协作点：nz-comment的输入属性既可绑定为字符串，也可绑定为TemplateRef，与列表项上下文（let-item）配合时非常灵活。

需要进一步查阅的仓库资料：评论组件 API 见 doc/index.zh-CN.md，组件模板与宿主样式见 comment.component.ts，列表渲染源码见 list.component.ts，全部演示代码位于 components/comment/demo 目录。

• UI组件
• 前端