Comment评论

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

何时使用

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

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

代码演示Comment评论 - 图2

Comment评论 - 图3

基本评论

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

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

Comment评论 - 图4

配合列表组件

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

  1. import { Component } from '@angular/core';
  2. import { addDays, formatDistance } 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: formatDistance(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: formatDistance(new Date(), addDays(new Date(), 2))
  37.     }
  38.   ];
  39. }

Comment评论 - 图5

嵌套评论

评论可以嵌套。

  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 }"> </ng-template>
  16.           </ng-template>
  17.         </ng-container>
  18.       </nz-comment>
  19.     </ng-template>
  21.     <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: data }"> </ng-template>
  22.   `
  23. })
  24. export class NzDemoCommentNestedComponent {
  25.   data = {
  26.     author: 'Han Solo',
  27.     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  28.     content:
  29.       'We supply a series of design principles, practical patterns and high quality design resources' +
  30.       '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  31.     children: [
  32.       {
  33.         author: 'Han Solo',
  34.         avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  35.         content:
  36.           'We supply a series of design principles, practical patterns and high quality design resources' +
  37.           '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  38.         children: [
  39.           {
  40.             author: 'Han Solo',
  41.             avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  42.             content:
  43.               'We supply a series of design principles, practical patterns and high quality design resources' +
  44.               '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
  45.           },
  46.           {
  47.             author: 'Han Solo',
  48.             avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  49.             content:
  50.               'We supply a series of design principles, practical patterns and high quality design resources' +
  51.               '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
  52.           }
  53.         ]
  54.       }
  55.     ]
  56.   };
  57. }

Comment评论 - 图6

回复框

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

  1. import { Component } from '@angular/core';
  2. import { formatDistance } 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.   // tslint:disable-next-line:no-any
  34.   data: any[] = [];
  35.   submitting = false;
  36.   user = {
  37.     author: 'Han Solo',
  38.     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
  39.   };
  40.   inputValue = '';
  42.   handleSubmit(): void {
  43.     this.submitting = true;
  44.     const content = this.inputValue;
  45.     this.inputValue = '';
  46.     setTimeout(() => {
  47.       this.submitting = false;
  48.       this.data = [
  49.         ...this.data,
  50.         {
  51.           ...this.user,
  52.           content,
  53.           datetime: new Date(),
  54.           displayTime: formatDistance(new Date(), new Date())
  55.         }
  56.       ].map(e => {
  57.         return {
  58.           ...e,
  59.           displayTime: formatDistance(new Date(), e.datetime)
  60.         };
  61.       });
  62.     }, 800);
  63.   }
  64. }

API

nz-commentcomponent

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

[nz-comment-avatar]directive

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

nz-comment-contentcomponent

评论的主要内容。

nz-comment-actioncomponent

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