• Comment评论
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • 评论组成部分

    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>在评论内容下面呈现的操作项