Angular复用服务与接口数据，分组件展示指定列的实现方法

核心思路 #

复用HomepageService获取的全量数据，通过列配置过滤和数据字段映射，让不同组件只渲染指定列与对应数据，避免重复请求接口。

具体实现步骤 #

1. 定义组件专属列配置 #

基于IColumn接口，在每个组件中只保留目标列的配置：

// 第一个组件的列配置
const firstComponentColumns: IColumn[] = [
  { key: 'Lp', label: 'Lp' },
  { key: 'id', label: 'ID' },
  { key: 'pluginName', label: '插件名称' }
];

// 第二个组件的列配置
const secondComponentColumns: IColumn[] = [
  { key: 'Lp', label: 'Lp' },
  { key: 'id', label: 'ID' },
  { key: 'port', label: '端口' }
];

2. 复用服务获取全量数据 #

在组件中注入HomepageService，调用接口获取全量IRecords数据，无需重复请求：

import { HomepageService } from './homepage.service';
import { IRecords } from './interfaces';

// 组件内逻辑
records: IRecords[] = [];

constructor(private homepageService: HomepageService) {}

ngOnInit() {
  this.homepageService.getFullRecords().subscribe(data => {
    this.records = data;
  });
}

3. 模板中匹配列与数据 #

遍历组件专属列配置，通过列的key从全量数据中取出对应字段值渲染：

<!-- 第一个组件模板 -->
<table>
  <thead>
    <tr>
      <th *ngFor="let col of firstComponentColumns">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let record of records">
      <td *ngFor="let col of firstComponentColumns">{{ record[col.key] }}</td>
    </tr>
  </tbody>
</table>

<!-- 第二个组件模板 -->
<table>
  <thead>
    <tr>
      <th *ngFor="let col of secondComponentColumns">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let record of records">
      <td *ngFor="let col of secondComponentColumns">{{ record[col.key] }}</td>
    </tr>
  </tbody>
</table>

4. 可选：跨组件缓存优化 #

如果两个组件不在同一父组件下，可在HomepageService中添加缓存逻辑，确保只请求一次接口：

// HomepageService中添加缓存
private recordsCache: IRecords[] | null = null;

getFullRecords() {
  if (this.recordsCache) {
    return of(this.recordsCache);
  }
  return this.http.get<IRecords[]>('/api/records').pipe(
    tap(data => this.recordsCache = data)
  );
}

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