Angular父组件多次复用同一子组件调用不同API 所有实例输出相同

问题根因 #

• Angular服务默认单例共享：如果你的ChildCompService是在模块或者root层级注册的，所有子组件实例会共享同一个服务实例。服务内部的_firstInstance是全局共享的BehaviorSubject，任意子组件调用getResults推送的结果会被所有订阅了firstInstance$的子组件接收，自然所有实例展示内容一致。
• getData方法语法错误：方法内部没有返回生成的Observable，子组件订阅到的是空值，且tap操作符仅处理副作用，内部返回of(value)不会生效。
• 父组件模板绑定语法错误：多个Input绑定之间不需要用逗号分隔，错误语法可能导致传值异常。

修复方案 #

1. 调整服务注册层级（可选，适合需要组件隔离服务状态的场景） #

在子组件的@Component装饰器中新增providers配置，让每个子组件实例拥有独立的服务实例，避免状态共享：

// child-comp.ts
@Component({
  selector: 'child-comp',
  templateUrl: './child-comp.html',
  providers: [ChildCompService] // 新增这行
})

2. 修复服务逻辑，移除全局共享Subject #

不要用服务的全局Subject广播请求结果，直接让请求方法返回Observable，由各子组件独立订阅自己的请求结果：

// child-service.ts
// 移除原有_firstInstance、firstInstance$相关代码
getResults(inp1: string): Observable<any> {
  const req = { param: inp1 };
  return this.http.get(url, req);
}

getData(inp2: string): Observable<string> {
  const req = { param: inp2 };
  // 补充return，删除无效的tap逻辑
  return this.http.get(url, req).pipe(
    shareReplay(1)
  );
}

3. 修复子组件逻辑 #

删除ngOnInit中订阅全局firstInstance$的代码，在ngOnChanges中直接订阅当前组件触发的请求：

// child-comp.ts
ngOnChanges(changes: SimpleChanges): void {
  // 新增非空判断，避免空输入触发无效请求
  if (changes['inp1'] && this.inp1) {
    this.childCompService.getResults(this.inp1)
      .pipe(
        takeUntil(this.unsubscribe$),
        mergeMap(resp => this.performKeys(resp).pipe(mapTo(resp)))
      )
      .subscribe(resp => {
        this.innerHtml = resp;
      });
  } else if (changes['inp2'] && this.inp2) {
    this.childCompService.getData(this.inp2)
      .pipe(
        takeUntil(this.unsubscribe$),
        mergeMap(result => this.performKeys(result).pipe(mapTo(result)))
      )
      .subscribe(result => {
        this.innerHtml = result;
      });
  }
}

4. 修复父组件模板语法 #

移除Input绑定之间的逗号：

<!-- parent-comp.html -->
<div>
  <div> Test Parent </div>
  <child-comp [inp1]="x" [inp2]=""></child-comp>
  <div> some text </div>
  <div> some text 2 </div> 
  <child-comp [inp1]="" [inp2]="y"></child-comp>
</div>

注意事项 #

每个子组件的unsubscribe$ Subject需在ngOnDestroy生命周期中执行next()和complete()，避免内存泄漏。

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