Angular子组件按钮事件触发后如何刷新父组件Observable数据

以下是3种可直接落地的实现路径，按推荐程度排序：

方案1：标准Angular @Output事件通信（耦合最低，最适合当前场景） #

这是组件通信最规范的实现方式，不需要引入额外服务改动，分三步修改现有代码：

• 修改子组件ButtonComponent：新增@Output装饰器向外抛出操作完成事件，同时修正原有代码的两个问题：
  1. 原有代码中this.prestation未定义，实际应该使用传入的@Input() element
  2. 必须等后端修改请求成功返回后再触发刷新，避免请求未完成就拉取到旧数据
     修改后代码：

  import { EventEmitter, Output } from '@angular/core';
  
  export class ButtonComponent implements OnInit {
    // 新增：向外传递操作完成事件
    @Output() taskSaved = new EventEmitter<void>();
    @Input() element!: Prestation;
  
    constructor(private taskService: TaskService) {}
  
    initTaskOnPrestation(bool: boolean) {
      this.element.urgency = bool;
      // 等待后端请求完成后再触发事件
      this.taskService.initTaskOnPrestation(this.element).subscribe({
        next: () => {
          // 请求成功后通知父组件
          this.taskSaved.emit();
        },
        error: (err) => {
          console.error('操作执行失败', err);
        }
      })
    }
  }
  

• 修改父组件模板step.html：在标签上监听子组件抛出的事件，绑定刷新方法

  <app-button 
    [element]="element" 
    (taskSaved)="loadTableData()"
  ></app-button>
  

• 修改父组件StepComponent：把原来ngOnInit里的拉取数据逻辑抽成独立的通用方法，方便初始加载和事件触发时复用

  export class StepComponent implements OnInit {
    displayedColumns: string[] = ['dateCreation','siteName', 'adress', 'postCode', 'commune','prestation', 'validation'];
    dataset!: DataTable[];
  
    constructor(private dataTableService: DataTableService) {}
  
    ngOnInit(): void {
      // 初始页面加载
      this.loadTableData();
    }
  
    // 抽离的通用数据加载方法
    loadTableData() {
      this.dataTableService.fetchDataTableNewPrestation().subscribe(r => this.dataset = r);
    }
  }
  

注意：你之前在父组件里写的@ViewChild(ButtonComponent) bhuttonChild!: ButtonComponent;在这里是无效的——因为按钮组件是表格循环渲染出来的多个实例，单靠ViewChild拿不到所有行的按钮组件引用，完全不需要保留这段代码。

方案2：RxJS Subject全局事件流（适合多触发源的场景） #

如果后续有多个不同位置的操作都需要触发这个表格刷新，不想一层层传递@Output事件，可以在共享服务里加一个可触发的流，配合RxJS操作符实现自动刷新：

• 在共享的DataTableService中新增一个Subject作为刷新触发器

  @Injectable({ providedIn: 'root' })
  export class DataTableService {
    // 刷新触发器：往这个流里发值，所有订阅方就会收到通知
    public refreshTrigger$ = new Subject<void>();
  
    // 原有fetchDataTableNewPrestation方法保持不变
    fetchDataTableNewPrestation() {
      // 原有逻辑
    }
  }
  

• 子组件在任务请求成功后，往这个流里发送通知

  export class ButtonComponent implements OnInit {
    @Input() element!: Prestation;
  
    constructor(
      private taskService: TaskService,
      private dataTableService: DataTableService
    ) {}
  
    initTaskOnPrestation(bool: boolean) {
      this.element.urgency = bool;
      this.taskService.initTaskOnPrestation(this.element).subscribe({
        next: () => {
          // 通知所有订阅方需要刷新
          this.dataTableService.refreshTrigger$.next();
        }
      })
    }
  }
  

• 父组件直接把两个流组合起来，实现收到通知就自动重新拉数据

  ngOnInit() {
    this.dataTableService.refreshTrigger$
      .pipe(
        // 页面初始化时先触发一次拉取，替代原来的初始subscribe
        startWith(void 0),
        // 收到触发信号后，切换为拉取表格数据的请求流
        switchMap(() => this.dataTableService.fetchDataTableNewPrestation())
      )
      .subscribe(res => this.dataset = res);
  }
  

优化建议：减少内存泄漏 #

不管用哪种方案，都可以把表格数据直接做成Observable流，配合模板的async管道使用，不需要手动管理订阅销毁：

• 父组件定义流类型的数据源：

  dataset$!: Observable<DataTable[]>;
  
  ngOnInit() {
    this.dataset$ = this.dataTableService.refreshTrigger$
      .pipe(
        startWith(void 0),
        switchMap(() => this.dataTableService.fetchDataTableNewPrestation())
      )
  }
  

• 模板里绑定async管道：

  <table mat-table [dataSource]="dataset$ | async">
  

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