Angular库与应用共享Service出现多实例，求单实例实现方法

问题根源 #

你给库组件的@Component装饰器添加了providers: [LogMonitorService]配置，这会强制Angular为该组件创建一个组件级别的Service实例，完全独立于你通过providedIn: 'root'声明的根注入器单例。两个实例各自维护状态，自然无法实现数据互通。

修复步骤 #

直接删除库组件providers数组中的LogMonitorService条目：

修改后的库组件代码：

@Component({
  selector: 'lib-log-monitor',
  standalone: true,
  imports: [CommonModule],
  // 移除该行，不再声明组件级Service
  templateUrl: './log-monitor.component.html',
  styleUrls: ['./log-monitor.component.css']
})
export class LogMonitorComponent implements OnInit, OnDestroy {
  private service = inject(LogMonitorService);
  private subscription: Subscription | undefined;
  public items: String[] = [];

  constructor() {
    this.subscription = this.service.observable.subscribe({
      next: (val) => {
        this.items = val;
      },
    })
  }
}

原理解释 #

当Service设置providedIn: 'root'时，Angular会在根注入器中创建全局唯一的实例，整个应用（包括引入的库组件）默认都会从根注入器获取该实例。但如果在组件的providers中重复声明Service，Angular会在组件的注入器层级创建新实例，覆盖根注入器的单例，这就是你看到两个实例的原因。

移除组件级的providers配置后，库组件和应用组件都会共享根注入器的同一个LogMonitorService实例，数据就能正常传递了。

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