• Comment评论
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-commentcomponent
      • [nz-comment-avatar]directive
      • nz-comment-contentcomponent
      • nz-comment-actioncomponent

    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

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