Angular删除帖子卡片后列表不自动更新 如何实现删除后自动重载数据

当前组件的数据流是断开的：

• 父组件PostListComponent持有全量posts列表数据，负责循环渲染每一个帖子卡片
• 子组件PostCardComponent独立处理单张卡片的删除逻辑，但删除请求成功后，既没有修改本地列表数据，也没有机制通知父组件同步更新
• 之前尝试删除后调用loadPosts()不生效，本质是这个方法的调用被写在了子组件的上下文里——loadPosts()是定义在PostListComponent中的方法，子组件无法获取该方法的实例，自然触发不了列表刷新。

遵循Angular父子组件标准通信规则，通过@Output事件将删除完成的信号从子组件传递到父组件，触发列表更新：

• 改造子组件PostCardComponent
  引入对应装饰器，定义向外抛出的删除事件，删除成功后触发事件通知父组件：

  // 新增引入Output、EventEmitter
  import { Output, EventEmitter } from '@angular/core';
  
  export class PostCardComponent implements OnInit {
    @Input() post: Post;
    // 新增：定义向外抛出的删除事件，携带被删除的帖子ID
    @Output() postDeleted = new EventEmitter<number>();
  
    // 调整原有deletePost方法
    deletePost(id: number) {
      this.postService.deletePost(id).subscribe(() => {
        this.toastr.success('Deleted');
        // 接口删除成功后，向外抛出事件
        this.postDeleted.emit(id);
      }, error => {
        console.log(error);
        this.toastr.error(error.error);
      });
    }
  }
  

• 改造父组件PostListComponent的模板
  监听子组件抛出的删除事件，绑定对应的处理逻辑：

  <div class="container mt-3">
    <span *ngFor="let post of posts">
      <!-- 新增postDeleted事件绑定 -->
      <app-post-card 
        [post]="post" 
        class="item"
        (postDeleted)="handlePostDeleted($event)"
      ></app-post-card>
    </span>
  </div>
  

• 在父组件中新增事件处理方法
  收到删除通知后更新本地列表，两种实现方式可按需选择，优先采用本地数组过滤的方式，无需重复发送请求，性能更优：

  export class PostListComponent implements OnInit {
    posts: Post[];
    // ... 原有属性、方法完整保留
  
    // 新增删除事件处理
    handlePostDeleted(deletedId: number) {
      // 高效实现：直接从本地数组中过滤掉被删除的帖子，即时更新列表
      this.posts = this.posts.filter(post => post.id !== deletedId);
  
      // 特殊场景需要重新拉取全量列表（如分页数据联动、关联数据同步的需求）时，直接调用原有loadPosts()即可，此时在父组件上下文内，方法可正常触发
      // this.loadPosts();
    }
  
    ngOnInit(): void {
      this.loadPosts();
    }
  }
  

整套改动无需大幅调整现有业务逻辑，只需要打通父子组件的通知链路，删除成功后页面会即时响应列表更新，不需要手动刷新页面。

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