Angular 19中WritableSignal数组更新后组件effect获取值为空问题排查

核心问题：服务实例不唯一 #

你遇到的问题根源是Angular注入的服务实例不唯一——添加错误的代码和头部组件注入的是两个不同的GlobalErrorHandlerService实例：

• 负责添加错误的实例中，errorEntries已经正确存储了错误条目
• 头部组件注入的实例中，errorEntries还是初始的空数组，所以errors.length始终为0

为什么会出现这个问题？ #

Angular中服务的实例范围由@Injectable的配置决定：

• 如果服务的@Injectable装饰器没有设置providedIn: 'root'，而是在多个模块/组件的providers数组中声明，就会创建多个独立实例。
• 比如你可能在某个模块的providers里注册了该服务，同时又在组件的providers里重复声明，导致组件拿到的是局部实例。

修复方案 #

1. 确保服务是全局单例（推荐） #

修改GlobalErrorHandlerService的@Injectable装饰器，设置为根级注入：

@Injectable({
  providedIn: 'root' // 强制全局唯一实例
})
export class GlobalErrorHandlerService {
  // 你的现有代码...
}

同时删除所有模块/组件providers数组中对该服务的声明，避免重复创建实例。

2. 优化信号暴露方式（可选，提升封装性） #

当前getErrorEntries()返回WritableSignal，外部可以直接修改信号值，不符合封装原则。建议改为返回只读信号：

// 服务内部代码
private errorEntries: WritableSignal<ErrorEntry[]> = signal<ErrorEntry[]>([]);

// 暴露只读信号，禁止外部修改
public get errorEntries(): Signal<ErrorEntry[]> {
  return this.errorEntries.asReadonly();
}

// 组件中使用方式调整
effect(() => {
  const errors = this.globalErrorHandlerService.errorEntries();
  this.showExclamationMark = errors.length > 0;
});

这样既保证组件能监听信号变化，又能防止外部意外修改信号内部数据。

3. 验证实例一致性（排查辅助） #

可以在服务构造函数中打印实例标识，确认添加错误和组件中注入的是同一个实例：

constructor(private router: Router) {
  console.log('GlobalErrorHandlerService实例:', this);
}

如果控制台输出多个不同的实例对象，就可以实锤是实例不唯一的问题。

内容的提问来源于stack exchange，提问作者L. Kvri