抽屉在另一个组件时如何更新Angular mat-table？

问题背景 #

主组件包含标签页及组件A、B等模块，组件A加载时会预加载数据，点击筛选按钮可通过drawerService切换主组件中的抽屉。抽屉提交筛选条件后，dataService通过this.dataSourceSubject.next(tmp_table)更新数据源，但目前仅切换标签页时组件A的mat-table才会刷新，需要实现抽屉关闭后表格同步更新，且不能重新加载页面（避免重复获取预加载数据）。

解决方案 #

1. 让组件A持续监听数据源变化 #

组件A需要在生命周期内保持对dataService中数据源Subject的订阅，确保每次数据源更新时自动同步表格数据：

import { Subscription } from 'rxjs';
import { MatTableDataSource } from '@angular/material/table';

export class ComponentA implements OnInit, OnDestroy {
  private dataSubscription: Subscription;
  dataSource = new MatTableDataSource<any>();

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // 订阅数据源，每次Subject更新都会触发表格数据刷新
    this.dataSubscription = this.dataService.dataSourceSubject.subscribe(updatedData => {
      this.dataSource.data = updatedData;
    });
  }

  ngOnDestroy(): void {
    // 销毁组件时取消订阅，防止内存泄漏
    this.dataSubscription?.unsubscribe();
  }
}

2. 将数据源Subject改为BehaviorSubject（可选） #

如果需要保留最新数据状态，确保组件A初始化时能直接获取到最新数据，将普通Subject替换为BehaviorSubject：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class DataService {
  // 初始化传入预加载数据或空数组
  private dataSourceSubject = new BehaviorSubject<any[]>([]);
  // 对外暴露只读的Observable
  public dataSource$ = this.dataSourceSubject.asObservable();

  constructor(private http: HttpClient) {}

  fetchData(filterParams: any): Observable<any[]> {
    return this.http.get<any[]>('your-api-endpoint', { params: filterParams }).pipe(
      tap(response => {
        // 更新数据源Subject
        this.dataSourceSubject.next(response);
      })
    );
  }

  // 预加载数据方法
  fetchPreloadData(): Observable<any[]> {
    return this.http.get<any[]>('preload-api-endpoint').pipe(
      tap(preloadData => {
        this.dataSourceSubject.next(preloadData);
      })
    );
  }
}

3. 确保抽屉提交逻辑正确触发数据源更新 #

抽屉提交时，正确传递筛选参数并调用dataService.fetchData，无需额外手动刷新表格，订阅会自动处理：

submitForm() {
  const filterParams = this.filterGroup.value;
  this.dataService.fetchData(filterParams).subscribe(() => {
    this.drawer.close();
    // 数据源已通过Service更新，组件A的订阅会自动刷新表格
  });
}

4. 处理路由复用场景（若启用） #

如果项目使用了路由复用策略（RouteReuseStrategy），组件A不会每次切换标签都重建，需在组件激活时重新同步数据：

import { ActivatedRouteSnapshot } from '@angular/router';

export class ComponentA implements OnInit, OnDestroy {
  // ... 其他代码

  // 路由激活钩子（需在路由配置中启用复用并绑定）
  routerActivate(route: ActivatedRouteSnapshot) {
    // 直接同步最新数据
    this.dataSource.data = this.dataService.dataSourceSubject.value;
  }
}

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