Comment评论

对网站内容的反馈、评价和讨论。

何时使用

评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzCommentModule } from 'ng-zorro-antd/comment';

代码演示

Comment评论 - 图1

基本评论

一个基本的评论组件，带有作者、头像、时间和操作。

  1. import { Component } from '@angular/core';
  2. import { distanceInWords } from 'date-fns';
  4. @Component({
  5.   selector: 'nz-demo-comment-basic',
  6.   template: `
  7.     <nz-comment nzAuthor="Han Solo" [nzDatetime]="time">
  8.       <nz-avatar
  9.         nz-comment-avatar
  10.         nzIcon="user"
  11.         nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  12.       ></nz-avatar>
  13.       <nz-comment-content>
  14.         <p>
  15.           We supply a series of design principles, practical patterns and high quality design resources (Sketch and
  16.           Axure), to help people create their product prototypes beautifully and efficiently.
  17.         </p>
  18.       </nz-comment-content>
  19.       <nz-comment-action>
  20.         <i
  21.           nz-tooltip
  22.           nzTitle="Like"
  23.           nz-icon
  24.           type="like"
  25.           [theme]="likes > 0 ? 'twotone' : 'outline'"
  26.           (click)="like()"
  27.         ></i>
  28.         <span class="count like">{{ likes }}</span>
  29.       </nz-comment-action>
  30.       <nz-comment-action>
  31.         <i
  32.           nz-tooltip
  33.           nzTitle="Dislike"
  34.           nz-icon
  35.           type="dislike"
  36.           [theme]="dislikes > 0 ? 'twotone' : 'outline'"
  37.           (click)="dislike()"
  38.         ></i>
  39.         <span class="count dislike">{{ dislikes }}</span>
  40.       </nz-comment-action>
  41.       <nz-comment-action>Reply to</nz-comment-action>
  42.     </nz-comment>
  43.   `,
  44.   styles: [
  45.     `
  46.       .count {
  47.         padding-left: 8px;
  48.         cursor: auto;
  49.       }
  50.     `
  51.   ]
  52. })
  53. export class NzDemoCommentBasicComponent {
  54.   likes = 0;
  55.   dislikes = 0;
  56.   time = distanceInWords(new Date(), new Date());
  58.   like(): void {
  59.     this.likes = 1;
  60.     this.dislikes = 0;
  61.   }
  63.   dislike(): void {
  64.     this.likes = 0;
  65.     this.dislikes = 1;
  66.   }
  67. }

Comment评论 - 图2

配合列表组件

配合 nz-list 组件展现评论列表。

  1. import { Component } from '@angular/core';
  2. import { addDays, distanceInWords } from 'date-fns';
  4. @Component({
  5.   selector: 'nz-demo-comment-list',
  6.   template: `
  7.     <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
  8.       <ng-template #item let-item>
  9.         <nz-comment [nzAuthor]="item.author" [nzDatetime]="item.datetime">
  10.           <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.avatar"></nz-avatar>
  11.           <nz-comment-content>
  12.             <p>{{ item.content }}</p>
  13.           </nz-comment-content>
  14.           <nz-comment-action>Reply to</nz-comment-action>
  15.         </nz-comment>
  16.       </ng-template>
  17.     </nz-list>
  18.   `
  19. })
  20. export class NzDemoCommentListComponent {
  21.   data = [
  22.     {
  23.       author: 'Han Solo',
  24.       avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  25.       content:
  26.         'We supply a series of design principles, practical patterns and high quality design resources' +
  27.         '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  28.       datetime: distanceInWords(new Date(), addDays(new Date(), 1))
  29.     },
  30.     {
  31.       author: 'Han Solo',
  32.       avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  33.       content:
  34.         'We supply a series of design principles, practical patterns and high quality design resources' +
  35.         '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  36.       datetime: distanceInWords(new Date(), addDays(new Date(), 2))
  37.     }
  38.   ];
  39. }

Comment评论 - 图3

嵌套评论

评论可以嵌套。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-comment-nested',
  5.   template: `
  6.     <ng-template #commentTemplateRef let-comment="comment">
  7.       <nz-comment [nzAuthor]="comment.author">
  8.         <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="comment.avatar"></nz-avatar>
  9.         <nz-comment-content>
  10.           <p>{{ comment.content }}</p>
  11.         </nz-comment-content>
  12.         <nz-comment-action>Reply to</nz-comment-action>
  13.         <ng-container *ngIf="comment.children && comment.children.length">
  14.           <ng-template ngFor let-child [ngForOf]="comment.children">
  15.             <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: child }">
  16.             </ng-template>
  17.           </ng-template>
  18.         </ng-container>
  19.       </nz-comment>
  20.     </ng-template>
  22.     <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: data }"> </ng-template>
  23.   `
  24. })
  25. export class NzDemoCommentNestedComponent {
  26.   data = {
  27.     author: 'Han Solo',
  28.     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  29.     content:
  30.       'We supply a series of design principles, practical patterns and high quality design resources' +
  31.       '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  32.     children: [
  33.       {
  34.         author: 'Han Solo',
  35.         avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  36.         content:
  37.           'We supply a series of design principles, practical patterns and high quality design resources' +
  38.           '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  39.         children: [
  40.           {
  41.             author: 'Han Solo',
  42.             avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  43.             content:
  44.               'We supply a series of design principles, practical patterns and high quality design resources' +
  45.               '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
  46.           },
  47.           {
  48.             author: 'Han Solo',
  49.             avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  50.             content:
  51.               'We supply a series of design principles, practical patterns and high quality design resources' +
  52.               '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
  53.           }
  54.         ]
  55.       }
  56.     ]
  57.   };
  58. }

Comment评论 - 图4

回复框

评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。

  1. import { Component } from '@angular/core';
  2. import { distanceInWords } from 'date-fns';
  4. @Component({
  5.   selector: 'nz-demo-comment-editor',
  6.   template: `
  7.     <nz-list *ngIf="data.length" [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
  8.       <ng-template #item let-item>
  9.         <nz-comment [nzAuthor]="item.author" [nzDatetime]="item.displayTime">
  10.           <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.avatar"></nz-avatar>
  11.           <nz-comment-content>
  12.             <p>{{ item.content }}</p>
  13.           </nz-comment-content>
  14.         </nz-comment>
  15.       </ng-template>
  16.     </nz-list>
  17.     <nz-comment>
  18.       <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="user.avatar"></nz-avatar>
  19.       <nz-comment-content>
  20.         <nz-form-item>
  21.           <textarea [(ngModel)]="inputValue" nz-input rows="4"></textarea>
  22.         </nz-form-item>
  23.         <nz-form-item>
  24.           <button nz-button nzType="primary" [nzLoading]="submitting" [disabled]="!inputValue" (click)="handleSubmit()">
  25.             Add Comment
  26.           </button>
  27.         </nz-form-item>
  28.       </nz-comment-content>
  29.     </nz-comment>
  30.   `
  31. })
  32. export class NzDemoCommentEditorComponent {
  33.   data: any[] = [];
  34.   submitting = false;
  35.   user = {
  36.     author: 'Han Solo',
  37.     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
  38.   };
  39.   inputValue = '';
  41.   handleSubmit(): void {
  42.     this.submitting = true;
  43.     const content = this.inputValue;
  44.     this.inputValue = '';
  45.     setTimeout(() => {
  46.       this.submitting = false;
  47.       this.data = [
  48.         ...this.data,
  49.         {
  50.           ...this.user,
  51.           content,
  52.           datetime: new Date(),
  53.           displayTime: distanceInWords(new Date(), new Date())
  54.         }
  55.       ].map(e => {
  56.         return {
  57.           ...e,
  58.           displayTime: distanceInWords(new Date(), e.datetime)
  59.         };
  60.       });
  61.     }, 800);
  62.   }
  63. }

API

nz-commentcomponent

PropertyDescriptionTypeDefault
[nzAuthor]显示评论的作者string | TemplateRef<void>-
[nzDatetime]展示时间描述string | TemplateRef<void>-

[nz-comment-avatar]directive

要显示为评论头像的元素。

nz-comment-contentcomponent

评论的主要内容。

nz-comment-actioncomponent

在评论内容下面呈现的操作项。