MEAN栈CRUD应用：点击保存后无需刷新更新Posts列表视图

嘿，我帮你搞定这个无刷新更新的问题！核心是现在你的posts-list组件只在初始化时拉取数据，添加新帖子后没有触发更新动作。这里有几个靠谱的方案，你可以根据需求选择：

方案1：通过服务广播更新事件（通用且易维护） #

这个方法适合大多数场景，通过服务中的Subject来通知所有订阅的组件数据发生了变化，触发列表刷新。

第一步：更新post.service.ts，添加事件广播机制 #

import { Post } from './posts.interface';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PostsService {
  uri = 'http://localhost:3000/api/posts';
  // 定义Subject用来广播数据更新事件
  private postUpdated = new Subject<void>();

  constructor(private http: HttpClient) {}

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(`${this.uri}`);
  }

  addPost(post: Post): Observable<Post> {
    return this.http.post<Post>(`${this.uri}`, post);
  }

  // 提供可订阅的Observable，让组件监听更新
  getPostUpdateListener(): Observable<void> {
    return this.postUpdated.asObservable();
  }

  // 触发更新通知的方法
  notifyPostUpdated() {
    this.postUpdated.next();
  }
}

第二步：修改post-create.component.ts，添加成功后发送更新通知 #

onAddPost() {
  this.postsService.addPost(this.post).subscribe(post => {
    // 清空表单，方便下次添加
    this.post = {} as Post;
    // 通知所有订阅组件：数据更新了！
    this.postsService.notifyPostUpdated();
  });
}

第三步：修改posts-list.component.ts，订阅更新事件并刷新列表 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Post } from '../posts.interface';
import { PostsService } from '../posts.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-posts-list',
  templateUrl: './posts-list.component.html',
  styleUrls: ['./posts-list.component.css']
})
export class PostsListComponent implements OnInit, OnDestroy {
  posts: Post[];
  // 保存订阅对象，组件销毁时取消订阅防止内存泄漏
  private updateSubscription: Subscription;

  constructor(public postsService: PostsService) {}

  ngOnInit() {
    this.getAllPosts();
    // 订阅更新事件，收到通知就重新拉取数据
    this.updateSubscription = this.postsService.getPostUpdateListener()
      .subscribe(() => {
        this.getAllPosts();
      });
  }

  getAllPosts() {
    this.postsService.getPosts().subscribe((posts: Post[]) => {
      this.posts = posts;
      console.log(this.posts);
    });
  }

  // 组件销毁时必须取消订阅
  ngOnDestroy() {
    this.updateSubscription.unsubscribe();
  }
}

方案2：直接将新帖子加入现有列表（更高效） #

如果你的后端在添加成功后会返回完整的新帖子数据，我们可以不用重新请求所有帖子，直接把新帖子加到列表数组里，减少一次HTTP请求。

第一步：修改post.service.ts的Subject类型 #

// 改成传递Post对象的Subject
private postUpdated = new Subject<Post>();

getPostUpdateListener(): Observable<Post> {
  return this.postUpdated.asObservable();
}

notifyPostAdded(newPost: Post) {
  this.postUpdated.next(newPost);
}

第二步：更新post-create.component.ts的通知逻辑 #

onAddPost() {
  this.postsService.addPost(this.post).subscribe(newPost => {
    this.post = {} as Post;
    // 把新创建的帖子传递给订阅组件
    this.postsService.notifyPostAdded(newPost);
  });
}

第三步：修改posts-list.component.ts的订阅处理 #

ngOnInit() {
  this.getAllPosts();
  this.updateSubscription = this.postsService.getPostUpdateListener()
    .subscribe((newPost: Post) => {
      // 将新帖子加到数组末尾（或开头，根据你的排序需求）
      this.posts.push(newPost);
      // 如果需要按时间排序，可以在这里处理
      // this.posts = [...this.posts].sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt));
    });
}

额外优化：提升表单体验 #

给你的表单添加提交事件支持，让用户按回车也能提交帖子：

<mat-card>
  <form (ngSubmit)="onAddPost()">
    <mat-form-field>
      <input matInput type="text" name="title" minlength="3" [(ngModel)]="post.title" placeholder="Post Title" required>
    </mat-form-field>
    <mat-form-field>
      <textarea matInput rows="4" name="content" [(ngModel)]="post.content" placeholder="Post Content" required>
      </textarea>
    </mat-form-field>
    <button mat-raised-button color="primary" class="save-btn" type="submit">Save Post</button>
  </form>
</mat-card>

现在点击「Save Post」后，帖子列表会自动刷新，不用重新加载页面啦！

内容的提问来源于stack exchange，提问作者Vishwanath B