向全栈迈进——Angular+Tornado开发树洞博客（十）

最新推荐文章于 2024-12-02 21:28:21 发布

原创最新推荐文章于 2024-12-02 21:28:21 发布 · 452 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular #评论树 #博客

angular 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用Angular开发一个评论系统前端，组件包括comments和commentform。通过ng-template、nz-list和nz-comment等组件，实现了评论及子评论的递归展示。评论树结构通过ngFor和ngTemplateOutlet进行模板复用，同时展示了如何处理数据和响应用户交互，例如点击回复按钮显示评论表单。

在上一篇博客的结尾，我们简要介绍了评论系统的思路。现在让我们来真正开发这个评论系统。

2 评论系统前端部分

我们评论系统由两个组件组成：comments和commentform。comments组件会显示所有评论以及发布评论的表单；而commentform就是我们发布评论的表单。
我们打开cmd窗口，输入以下命令，建立comments组件以及commentform组件：

ng g c comments -m story
ng g c commentform -m story

这样我们就在story目录下得到了commentform和comments组件。
让我们先来看comments组件。这个组件的本质是一个list，显示故事下的每条评论；然而每个list的元素都是一个嵌套的评论树，显示每条评论的子评论。
我们打开comments.component.html文件，输入以下内容：

<!--comments.component.html-->
<nz-list [nzDataSource]="commentTree[storyId]" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
  <ng-template #item let-item>
    <ng-template #commentTemplateRef let-comment="comment">
      <nz-comment [nzAuthor]="comment.author">
        <nz-comment-content>
          <p>{{ comment.content }}</p>
        </nz-comment-content>
        <nz-comment-action><span (click)="showCommentForm(comment.id)">回复</span></nz-comment-action>
        <div *ngIf="showComment[comment.id]">
          <app-commentform [commentBody]="comment.externalId" ></app-commentform>
        </div>
  
        <ng-container *ngIf="comment.children && comment.children.length">
          <ng-template ngFor let-child [ngForOf]="comment.children">
            <ng-template
              [ngTemplateOutlet]="commentTemplateRef"
              [ngTemplateOutletContext]="{ comment: child }"
            ></ng-template>
          </ng-template>
        </ng-container>
        
      </nz-comment>
    </ng-template>
  
    <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: item }"></ng-template>
  </ng-template>
</nz-list>

整个代码结构图如下图所示：
在这里插入图片描述
代码总体表现为一个list列表，列表元素为故事的comment；对于每个comment，又会有多条子评论sub comment，子评论也会有同样的子评论sub comment，从而构成一颗评论树；而对于comment和sub comment，我们都会用一个模板commentTemplateRef将其呈现出来。
因此，我们在这里会用到对列表组件以及对模板<ng-template>的复用。
列表组件我们依然使用<nz-list>，用以将内层的<ng-template>渲染出来；内层代码分为两部分：一部分是<ng-template>部分的定义，另一部分为<ng-template>的展现，二者共同组成<nz-list>的一个元素。
让我们先来看内层代码的第一部分：

    <ng-template #commentTemplateRef let-comment="comment">
      <nz-comment [nzAuthor]="comment.author">
        <nz-comment-content>
          <p>{{ comment.content }}</p>
        </nz-comment-content>
        <nz-comment-action><span (click)="showCommentForm(comment.id)">回复</span></nz-comment-action>
        <div *ngIf="showComment[comment.id]">
          <app-commentform [commentBody]="comment.externalId" ></app-commentform>
        </div>
  
        <ng-container *ngIf="comment.children && comment.children.length">
          <ng-template ngFor let-child [ngForOf]="comment.children">
            <ng-template
              [ngTemplateOutlet]="commentTemplateRef"
              [ngTemplateOutletContext]="{ comment: child }"
            ></ng-template>
          </ng-template>
        </ng-container>
        
      </nz-comment>
    </ng-template>

在这段代码中，我们将会涉及到以下几个概念：<ng-template>，<ngTemplateOutlet>和<ngTemplateOutletContext>，这三个元素共同组成了angular中模板的概念。
让我们先来看这部分的第一行代码：

<ng-template #commentTemplateRef let-comment="comment">

在这行代码中，#commentTemplateRef的意思是我们定义了一个名为commentTemplateRef的模板变量，在之后我们可以使用commentTemplateRef来指代这个模板。let-comment="comment"的含义是，在这个组件内部有一个名为comment的变量用于维护内容（猜测，因为看不到源码），我们需要为这个变量指定一个key为comment的对象，以便在之后为其动态赋予内容。
在这行代码之后，我们会摆放<nz-comment>组件作为模板里的第一个元素。<nz-comment>元素又分为4部分：<nz-comment-content>，<nz-comment-action>，<app-commentform>和一个<ng-container>。下面让我们分别看看这4个元素。

<nz-comment-content>顾名思义，用于显示评论的内容。
<nz-comment-action>为评论的回复按钮，点击它会显示评论表单，如下图所示：
<app-commentform>为我们稍后要实现的评论表单，其为一个单行表单，用于发表子评论，如图所示：
最后的<ng-container>用于显示评论树，这里会复用第一部分定义的模板commentTemplateRef。
在这里，我们以这个<ng-container>中的模板为例，讲一下<ngTemplateOutlet>和<ngTemplateOutContext>的用法：

          <ng-template ngFor let-child [ngForOf]="comment.children">
            <ng-template
              [ngTemplateOutlet]="commentTemplateRef"
              [ngTemplateOutletContext]="{ comment: child }"
            ></ng-template>
          </ng-template>

这里结合数据来看会比较好理解，下方是我们稍后要通过服务器构造的数据形式：

data = {
  id:11,
  author: 'Han Solo',
  avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  content:
    'We supply a series of design principles, practical patterns and high quality design resources' +
    '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  children: [
    {
      id:21,
      author: 'Han Solo',
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      content:
        'We supply a series of design principles, practical patterns and high quality design resources' +
        '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
      children: [
        {
          id:31,
          author: 'Han Solo',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            'We supply a series of design principles, practical patterns and high quality design resources' +
            '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
        },
        {
          id:41,
          author: 'Han Solo',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            'We supply a series of design principles, practical patterns and high quality design resources' +
            '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
        }
      ]
    }
  ]
};

可以看到，我们的数据是嵌套的json格式，每一条评论会以json的形式发送到前端；并且在一个评论的json内部还会拥有名为children的数组，表示该评论的子评论。
有了范例数据，理解下面的代码就会比较好理解了。让我们先看第一行的代码：

<ng-template ngFor let-child [ngForOf]="comment.children">

这行代码看着很陌生，但其实它是之前用过的*ngFor的一个变种语法，用于模板中。这里以<li>标签举例看一下这两种语法的区别：

<!--普通用法-->
<li *ngFor="let item of items"></li>

<!--模板中用法-->
<ng-template ngFor let-item [ngForOf]="items">
  <li>...</li>
</ng-template>

所以，这一行代码的意思就是遍历每个评论json数据中的children数组，并将其应用于下面的模板中。
让我们继续看下面的代码：

            <ng-template
              [ngTemplateOutlet]="commentTemplateRef"
              [ngTemplateOutletContext]="{ comment: child }"
            ></ng-template>

这里其实只有一行代码，但涉及了两个重要概念：ngTemplateOutlet和ngTemplateOutletContent，这两者都是用于模板复用的变量。
ngTemplateOutlet用于指明这个<ng-template>块要复用哪个模板，值为之前我们定义的模板变量commentTemplateRef，即这个<ng-template>实际上使用的代码和上面实现的一样；ngTemplateOutletContext接受一个对象作为赋值，其类型为key-value型对象，我们这里赋予的对象为{ comment:child}，意思为在复用的模板中要使用的内容为评论中children数组中的每个对象。
这样，通过模板的嵌套复用，我们就实现了一个递归的评论树。
这个组件的最后一行代码就很好理解了，显示列表中其他评论：

<ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: item }"></ng-template>

在这篇博客中，我们介绍了评论组件的html代码，介绍了angular中模板的相关知识。在下一期博客中，我们将继续介绍评论组件的前端部分，将会涉及到组件间的通信等操作，希望大家继续关注~