Angular 14独立组件如何获取已初始化的单例FooService实例？

问题根源 #

你遇到的问题核心是组件级别的服务注入覆盖了根注入器的实例：
BarComponent的@Component元数据里配置了providers: [FooService]，这会让Angular为该组件创建一个独立的FooService实例，完全和AppModule里通过APP_INITIALIZER初始化的实例无关，自然拿不到已经初始化好的数据。

解决方案 #

方案1：移除组件内的服务声明（最直接）

直接删除BarComponent的providers数组，组件会自动从根注入器（AppModule所在的注入器）获取FooService的单例实例，也就是已经完成初始化的那个：

修改后的component.ts：

@Component({
    standalone: true,
    imports: [],
    // 删掉这行：providers: [FooService]
})
export class BarComponent implements OnInit, OnDestroy {
    constructor(
        private fooService: FooService
    ) {}
}

方案2：将FooService标记为根级提供（推荐最佳实践）

给FooService添加@Injectable({providedIn: 'root'})装饰器，让它默认成为根注入器的单例服务，这样无论在哪里注入，只要不手动在组件/模块级别重新声明providers，拿到的都是同一个实例：

@Injectable({
    providedIn: 'root' // 关键：标记为根级提供
})
export class FooService {
    async init() {
        // 你的初始化逻辑
    }
}

这种方式下，AppModule里的APP_INITIALIZER会注入这个根实例完成初始化，BarComponent直接注入FooService即可，不需要在providers里声明。

方案3：强制从根注入器获取实例（特殊场景用）

如果因为某些原因必须保留组件内的providers配置（不推荐），可以通过指定注入器来源来获取根实例：

import { Inject, Injector, inject } from '@angular/core';

@Component({
    standalone: true,
    imports: [],
    // 即使保留这行，也能强制获取根实例
    providers: [FooService],
})
export class BarComponent implements OnInit, OnDestroy {
    private fooService: FooService;

    constructor(
        private injector: Injector
    ) {
        // 方式1：使用inject函数（Angular 14+）
        this.fooService = inject(FooService, {injector: Injector.root});
        
        // 方式2：使用@Inject装饰器
        // @Inject(FooService) private fooService: FooService,
    }
}

不过这种方式属于临时 workaround，除非特殊情况不建议使用，会让依赖关系变得不清晰。

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