Angular中如何为多组无关组件实例绑定独立共享服务？

你的核心问题是当前DataSharingService是根级单例，所有组件共用同一个实例，所以搜索时所有表格都会触发更新。要给每组组件绑定专属服务实例，不用合并组件，按以下步骤修改即可：

1. 调整服务的注入配置 #

把服务的providedIn: 'root'删掉，这样服务不会默认成为全局单例，而是由组件来控制实例的创建：

// Data sharing service
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable() // 移除providedIn: 'root'
export class DataSharingService {
    private data = new BehaviorSubject<any>(null);
    currData = this.data.asObservable();

    constructor(){}

    updateSearchRes(newData: any){
        this.data.next(newData);
    }
}

2. 给每组组件加父容器并提供服务 #

创建一个父组件（比如SearchTableGroup），把搜索和表格组件包裹在里面，然后在父组件的providers数组里声明DataSharingService。这样每个父组件实例都会生成一个独立的服务实例，它下面的搜索和表格组件会共用这个实例：

// search-table-group.component.ts
import { Component } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-search-table-group',
  template: `
    <app-search-component></app-search-component>
    <app-table-component></app-table-component>
  `,
  providers: [DataSharingService] // 每个父组件实例对应一个专属服务实例
})
export class SearchTableGroupComponent {}

3. 用父组件创建多组实例 #

在页面里直接使用这个父组件来生成多组搜索-表格：

<!-- 页面模板 -->
<app-search-table-group></app-search-table-group>
<app-search-table-group></app-search-table-group>

现在每组的搜索组件调用updateSearchRes时，只会触发同一组内的表格更新，不同组之间完全独立。

备选方案：无需新增父组件的写法 #

如果不想额外创建父组件，Angular 14+支持在模板中给容器元素指定providers，直接给每组搜索-表格包个ng-container就行：

<!-- 容器组件模板 -->
<ng-container [providers]="[DataSharingService]">
  <app-search-component></app-search-component>
  <app-table-component></app-table-component>
</ng-container>

<ng-container [providers]="[DataSharingService]">
  <app-search-component></app-search-component>
  <app-table-component></app-table-component>
</ng-container>

这种写法更简洁，但父组件的方式更利于后续维护和扩展。

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