给模型注入服务是否合理？自定义MatTableDataSource实践困惑

当自定义MatTableDataSource的筛选/排序逻辑需要依赖服务（包括API调用、其他内部服务）时，应该遵循Angular的依赖注入设计原则，避免static函数或全局Injector这类不够优雅的实现方式，以下是两种合理的解决方案：

方案1：构造函数注入服务（同步逻辑场景） #

直接在自定义MatTableDataSource子类的构造函数中注入所需服务，这是最符合Angular DI规范的做法，服务的生命周期由框架管理，不会出现耦合或生命周期不一致的问题。

示例代码：

import { MatTableDataSource, MatSort } from '@angular/material/table';
import { YourBusinessService } from './your-business.service';

export class CustomDataSource<T> extends MatTableDataSource<T> {
  constructor(private readonly businessService: YourBusinessService) {
    super();
    // 绑定自定义筛选器
    this.filterPredicate = this.customFilter.bind(this);
  }

  // 自定义筛选逻辑，直接调用服务方法
  private customFilter(data: T, filterText: string): boolean {
    // 调用服务中带依赖的筛选处理逻辑
    return this.businessService.matchFilterCondition(data, filterText);
  }

  // 自定义排序逻辑
  override sortData(data: T[], sort: MatSort): T[] {
    // 复用服务中的排序规则
    return this.businessService.sortDataByRules(data, sort);
  }
}

组件中使用时，直接注入服务并实例化自定义数据源：

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html'
})
export class YourTableComponent {
  dataSource: CustomDataSource<YourDataType>;

  constructor(private businessService: YourBusinessService) {
    this.dataSource = new CustomDataSource(businessService);
    // 初始化数据源
    this.dataSource.data = this.getInitialData();
  }

  private getInitialData(): YourDataType[] {
    return [/* 初始数据 */];
  }
}

方案2：RxJS流处理异步逻辑（API调用场景） #

如果筛选逻辑需要异步操作（比如调用后端API做远程筛选），filterPredicate这类同步方法无法直接处理，此时可以用RxJS流来管理筛选状态的变化，通过订阅异步结果更新数据源。

示例代码：

import { MatTableDataSource } from '@angular/material/table';
import { YourApiService } from './your-api.service';
import { BehaviorSubject, switchMap, tap } from 'rxjs';

export class AsyncCustomDataSource<T> extends MatTableDataSource<T> {
  private filterSubject = new BehaviorSubject<string>('');
  private originalData: T[] = [];

  constructor(private readonly apiService: YourApiService) {
    super();
    // 监听筛选关键词变化，触发异步API调用
    this.filterSubject.pipe(
      switchMap(filterText => this.apiService.remoteFilter(this.originalData, filterText))
    ).subscribe(filteredData => {
      this.data = filteredData;
    });
  }

  // 重写filter的get/set方法，关联RxJS流
  override set filter(value: string) {
    this.filterSubject.next(value);
  }

  override get filter(): string {
    return this.filterSubject.value;
  }

  // 设置原始数据并触发初始筛选
  setOriginalData(data: T[]) {
    this.originalData = [...data];
    this.filterSubject.next(this.filter);
  }
}

组件中使用：

@Component({...})
export class YourTableComponent {
  dataSource: AsyncCustomDataSource<YourDataType>;

  constructor(private apiService: YourApiService) {
    this.dataSource = new AsyncCustomDataSource(apiService);
    // 加载初始数据后传入数据源
    this.apiService.getInitialData().subscribe(initialData => {
      this.dataSource.setOriginalData(initialData);
    });
  }
}

为什么不推荐全局Injector？ #

全局导出Injector会让服务实例脱离Angular的DI容器管控，容易出现生命周期不匹配、内存泄漏等问题，同时会提高代码耦合度，不利于单元测试和后续维护。

总结 #

• 同步依赖逻辑：直接在自定义DataSource构造函数中注入服务，在筛选/排序方法中调用服务能力。
• 异步API场景：通过RxJS流管理筛选状态，订阅异步结果更新数据源。

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