Angular两组件通过Service共享数据列表时为空的问题解析

核心问题：数组引用的断裂 #

你的代码里，DataService通过getListeSelectedNames()返回内部数组的直接引用，但问题大概率出在SelectNomComponent的增删逻辑上——如果你的代码里做了数组重新赋值（比如用=把整个数组换成新的，比如this.listeSelectedNames = [...newList]或者this.listeSelectedNames = []），而不是用push/splice这类修改原数组的方法，就会出现这种情况：

• 子组件里的listeSelectedNames变量会指向一个新的数组对象
• 但LeftMenuComponent里的listeSelectedNames仍然绑定在DataService一开始创建的那个空数组引用上

这就导致父组件调用launchSearch()时，打印的还是最初的空数组，而子组件因为已经切换到新数组，UI能正常显示增删结果。

验证猜想的关键点 #

去检查SelectNomComponent里的操作逻辑：

• 如果是用push/splice/unshift这类修改原数组内容的方法：理论上父组件和子组件的数组引用是同一个，打印不该为空
• 如果是用=直接替换数组：这就是问题根源，直接切断了和服务中原数组的关联

为什么BehaviorSubject能解决？ #

因为BehaviorSubject是通过主动推送最新值的方式，让所有订阅的组件同步拿到最新的数组引用——不管你是修改原数组还是替换成新数组，只要调用next()把新数组推出去，所有组件都会自动更新到最新引用，从根源上避免了引用不一致的问题。

不用Observable的修复思路 #

如果想继续用数组引用的方式，得做到两点：

1. 永远不直接替换数组引用，只修改原数组的内容：

   // 子组件添加元素示例
   addSelectedName(item: NomGenerique) {
     this.listeSelectedNames.push(item);
   }
   // 子组件删除元素示例
   removeSelectedName(index: number) {
     this.listeSelectedNames.splice(index, 1);
   }
   

2. 或者把数组的修改逻辑全部封装在DataService里，禁止组件直接操作数组：

   @Injectable()
   export class DataService {
     private listeSelectedNames: NomGenerique[] = [];
   
     getListeSelectedNames(): NomGenerique[] {
       return this.listeSelectedNames;
     }
   
     addName(name: NomGenerique) {
       this.listeSelectedNames.push(name);
     }
   
     removeNameByCode(codeNom: string) {
       this.listeSelectedNames = this.listeSelectedNames.filter(n => n.codeNom !== codeNom);
     }
   }
   

   这种方式下，组件每次需要使用数组时，都重新调用getListeSelectedNames()获取最新引用，也能避免不一致的问题，但不如Observable的自动同步省心。

内容的提问来源于stack exchange，提问作者Manolo de la Vega