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.   styles: []
  20. })
  21. export class NzDemoCommentListComponent {
  22.   data = [
  23.     {
  24.       author: 'Han Solo',
  25.       avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  26.       content:
  27.         'We supply a series of design principles, practical patterns and high quality design resources' +
  28.         '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  29.       datetime: distanceInWords(new Date(), addDays(new Date(), 1))
  30.     },
  31.     {
  32.       author: 'Han Solo',
  33.       avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  34.       content:
  35.         'We supply a series of design principles, practical patterns and high quality design resources' +
  36.         '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  37.       datetime: distanceInWords(new Date(), addDays(new Date(), 2))
  38.     }
  39.   ];
  40. }

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

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.   styles: []
  32. })
  33. export class NzDemoCommentEditorComponent {
  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: distanceInWords(new Date(), new Date())
  55.         }
  56.       ].map(e => {
  57.         return {
  58.           ...e,
  59.           displayTime: distanceInWords(new Date(), e.datetime)
  60.         };
  61.       });
  62.     }, 800);
  63.   }
  64. }

API

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

单独引入此组件

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

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

评论组成部分

元素说明
<nz-avatar nz-comment-avatar>要显示为评论头像的元素
<nz-comment-content>评论的主要内容
<nz-comment-action>在评论内容下面呈现的操作项