在Conduit应用中，我们能够对文章留下评论。要建立这个功能，我们首先需要创建一个评论模型。

创建评论模型

src/app/shared/models/comment.model.ts

  1. import { Profile } from './profile.model';
  3. export class Comment {
  4.   id: number;
  5.   body: string;
  6.   createdAt: string;
  7.   author: Profile;
  8. }

src/app/shared/models/index.ts

  1.  export * from './article.model';
  2. +export * from './comment.model';
  3.  export * from './errors.model';
  4.  export * from './profile.model';
  5.  export * from './user.model';

我们需要一种创建、获取和删除评论的方法，所以让我们创建一个服务来处理这个问题。

创建评论服务

src/app/shared/services/comments.service.ts

  1. import { Injectable } from '@angular/core';
  2. import { Observable } from 'rxjs/Rx';
  3. import 'rxjs/add/operator/map';
  4. import 'rxjs/add/operator/catch';
  6. import { ApiService } from './api.service';
  7. import { Comment } from '../models';
  10. @Injectable()
  11. export class CommentsService {
  12.   constructor (
  13.     private apiService: ApiService
  14.   ) {}
  16.   add(slug, payload): Observable<Comment> {
  17.     return this.apiService.post(`/articles/${slug}/comments`, { comment: { body: payload } })
  18.      .map(data => data.comment);
  19.   }
  21.   getAll(slug): Observable<Comment[]> {
  22.     return this.apiService.get(`/articles/${slug}/comments`)
  23.      .map(data => data.comments);
  24.   }
  26.   destroy(commentId, articleSlug) {
  27.     return this.apiService.delete(`/articles/${articleSlug}/comments/${commentId}`);
  28.   }
  30. }

将我们的评论服务导出到我们的应用程序

src/app/shared/services/index.ts

  1.  export * from './api.service';
  2.  export * from './articles.service';
  3.  export * from './auth-guard.service';
  4. +export * from './comments.service';
  5.  export * from './jwt.service';
  6.  export * from './profiles.service';
  7.  export * from './user.service';

而我们需要将其包含在app模块中。

src/app/app.module.ts

  1. [...]
  3.  import { RouterModule } from '@angular/router';
  5.  import { AppComponent } from './app.component';
  6. import { ArticleModule } from './article/article.module';
  7.  import { AuthModule } from './auth/auth.module';
  8.  import { EditorModule } from './editor/editor.module';
  9.  import { HomeModule } from './home/home.module';
  12. [...]
  14.    ApiService,
  15.    ArticlesService,
  16.    AuthGuard,
  17. +  CommentsService,
  18.    FooterComponent,
  19.    HeaderComponent,
  20.    JwtService,
  23. [...]
  26.      ApiService,
  27.      ArticlesService,
  28.      AuthGuard,
  29. +    CommentsService,
  30.      JwtService,
  31.      ProfilesService,
  32.      UserService
  35. [...]

让我们来创建一个用于显示单个评论的组件

创建ArticleComment组件

src/app/article/article-comment.component.html

  1. <div class="card">
  2.   <div class="card-block">
  3.     <p class="card-text">
  4.       {{ comment.body }}
  5.     </p>
  6.   </div>
  7.   <div class="card-footer">
  8.     <a class="comment-author" [routerLink]="['/profile', comment.author.username]">
  9.       <img [src]="comment.author.image" class="comment-author-img" />
  10.     </a>
  11.     &nbsp;
  12.     <a class="comment-author" [routerLink]="['/profile', comment.author.username]">
  13.       {{ comment.author.username }}
  14.     </a>
  15.     <span class="date-posted">
  16.       {{ comment.createdAt | date: 'longDate' }}
  17.     </span>
  18.     <span class="mod-options" [hidden]="!canModify">
  19.       <i class="ion-trash-a" (click)="deleteClicked()"></i>
  20.     </span>
  21.   </div>
  22. </div>

src/app/article/article-comment.component.ts

  1. import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
  3. import { Comment, User, UserService } from '../shared';
  5. @Component({
  6.   selector: 'article-comment',
  7.   templateUrl: './article-comment.component.html'
  8. })
  9. export class ArticleCommentComponent implements OnInit {
  10.   constructor(
  11.     private userService: UserService
  12.   ) {}
  14.   @Input() comment: Comment;
  15.   @Output() deleteComment = new EventEmitter<boolean>();
  17.   canModify: boolean;
  19.   ngOnInit() {
  20.     // Load the current user's data
  21.     this.userService.currentUser.subscribe(
  22.       (userData: User) => {
  23.         this.canModify = (userData.username === this.comment.author.username);
  24.       }
  25.     );
  26.   }
  28.   deleteClicked() {
  29.     this.deleteComment.emit(true);
  30.   }
  33. }

我们需要在ArticleModule中声明这个组件才能使用它。

src/app/article/article.module.ts

  1. import { ModuleWithProviders, NgModule } from '@angular/core';
  2. import { RouterModule } from '@angular/router';
  4. import { ArticleComponent } from './article.component';
  5. +import { ArticleCommentComponent } from './article-comment.component';
  6. import { ArticleResolver } from './article-resolver.service';
  7. import { MarkdownPipe } from './markdown.pipe';
  8. import { SharedModule } from '../shared';
  10. const articleRouting: ModuleWithProviders = RouterModule.forChild([
  11.   {
  12.     path: 'article/:slug',
  13.     component: ArticleComponent,
  14.     resolve: {
  15.       article: ArticleResolver
  16.     }
  17.   }
  18. ]);
  20. @NgModule({
  21.   imports: [
  22.     articleRouting,
  23.     SharedModule
  24.   ],
  25.   declarations: [
  26.     ArticleComponent,
  27. +    ArticleCommentComponent,
  28.     MarkdownPipe
  29.   ],
  31.   providers: [
  32.     ArticleResolver
  33.   ]
  34. })
  35. export class ArticleModule {}

接下来，我们需要更新文章组件，使用我们新创建的ArticleComment服务来处理检索、创建和删除评论。

用检索、创建和删除注释来更新ArticleComponent

src/app/article/article.component.ts

  1. import { Component, OnInit } from '@angular/core';
  2. import { FormControl } from '@angular/forms';
  3. import { ActivatedRoute, Router } from '@angular/router';
  5. import {
  6.   Article,
  7.   ArticlesService,
  8. +  Comment,
  9. +  CommentsService,
  10.   User,
  11.   UserService
  12. } from '../shared';
  14. @Component({
  15.   selector: 'article-page',
  16.   templateUrl: './article.component.html'
  17. })
  18. export class ArticleComponent implements OnInit {
  19.   article: Article;
  20.   currentUser: User;
  21.   canModify: boolean;
  22. +  comments: Comment[];
  23. +  commentControl = new FormControl();
  24. +  commentFormErrors = {};
  25.   isSubmitting = false;
  26.   isDeleting = false;
  28.   constructor(
  29.     private route: ActivatedRoute,
  30.     private articlesService: ArticlesService,
  31. +    private commentsService: CommentsService,
  32.     private router: Router,
  33.     private userService: UserService,
  34.   ) { }
  36.   ngOnInit() {
  37.     // Retreive the prefetched article
  38.     this.route.data.subscribe(
  39.       (data: { article: Article }) => {
  40.         this.article = data.article;
  41. +
  42. +        // Load the comments on this article
  43. +        this.populateComments();
  44.       }
  45.     );
  47.     // Load the current user's data
  48.     this.userService.currentUser.subscribe(
  49.       (userData: User) => {
  50.         this.currentUser = userData;
  52.         this.canModify = (this.currentUser.username === this.article.author.username);
  53.       }
  54.     );
  55.   }
  57.   onToggleFavorite(favorited: boolean) {
  58.     this.article.favorited = favorited;
  60.     if (favorited) {
  61.       this.article.favoritesCount++;
  62.     } else {
  63.       this.article.favoritesCount--;
  64.     }
  65.   }
  67.   onToggleFollowing(following: boolean) {
  68.     this.article.author.following = following;
  69.   }
  71.   deleteArticle() {
  72.     this.isDeleting = true;
  74.     this.articlesService.destroy(this.article.slug)
  75.       .subscribe(
  76.         success => {
  77.           this.router.navigateByUrl('/');
  78.         }
  79.       );
  80.   }
  82. +  populateComments() {
  83. +    this.commentsService.getAll(this.article.slug)
  84. +      .subscribe(comments => this.comments = comments);
  85. +  }
  86. +
  87. +  addComment() {
  88. +    this.isSubmitting = true;
  89. +    this.commentFormErrors = {};
  90. +
  91. +    let commentBody = this.commentControl.value;
  92. +    this.commentsService
  93. +      .add(this.article.slug, commentBody)
  94. +      .subscribe(
  95. +        comment => {
  96. +          this.comments.unshift(comment);
  97. +          this.commentControl.reset('');
  98. +          this.isSubmitting = false;
  99. +        },
  100. +        errors => {
  101. +          this.isSubmitting = false;
  102. +          this.commentFormErrors = errors;
  103. +        }
  104. +      );
  105. +  }
  107. +  onDeleteComment(comment) {
  108. +    this.commentsService.destroy(comment.id, this.article.slug)
  109. +      .subscribe(
  110. +        success => {
  111. +          this.comments = this.comments.filter((item) => item !== comment);
  112. +        }
  113. +      );
  114. +  }
  116. }

然后我们就可以更新文章模板来挂入组件的新方法。

更新ArticleComponent模板

src/app/article/article.component.html

  1. [...]
  3.     <div class="row">
  4.       <div class="col-xs-12 col-md-8 offset-md-2">
  6. +        <div *showAuthed="true">
  7. +          <list-errors [errors]="commentFormErrors"></list-errors>
  8. +          <form class="card comment-form" (ngSubmit)="addComment()">
  9. +            <fieldset [disabled]="isSubmitting">
  10. +              <div class="card-block">
  11. +                <textarea class="form-control"
  12. +                  placeholder="Write a comment..."
  13. +                  rows="3"
  14. +                  [formControl]="commentControl"
  15. +                ></textarea>
  16. +              </div>
  17. +              <div class="card-footer">
  18. +                <img [src]="currentUser.image" class="comment-author-img" />
  19. +                <button class="btn btn-sm btn-primary" type="submit">
  20. +                 Post Comment
  21. +                </button>
  22. +              </div>
  23. +            </fieldset>
  24. +          </form>
  25. +        </div>
  27.         <div *showAuthed="false">
  28.           <a [routerLink]="['/login']">Sign in</a> or <a [routerLink]="['/register']">sign up</a> to add comments on this article.
  29.         </div>
  31. +        <article-comment
  32. +          *ngFor="let comment of comments"
  33. +          [comment]="comment"
  34. +          (deleteComment)="onDeleteComment(comment)">
  35. +        </article-comment>
  37.       </div>
  38.     </div>
  40. [...]

我们现在有了对文章的评论功能！

你可以将你的代码与Github上的有效代码进行比较，或者在本地检查分支：

  1. git checkout m-1