Angular注入服务未就绪：如何等待服务完成初始化？

问题根源 #

你在服务的构造函数中执行异步HTTP请求，但构造函数是同步执行的——HTTP请求还在处理时，构造函数已经执行完毕，组件的ngOnInit会立即调用服务方法，此时服务的类变量尚未完成初始化，自然报错。另外，绝对不要在构造函数中处理异步逻辑或耗时操作，这违反Angular的设计原则，构造函数仅应用于依赖注入。

方案一：使用APP_INITIALIZER预初始化服务 #

这是开销最低的方案之一，利用Angular的APP_INITIALIZER令牌，在应用启动阶段就完成服务的初始化，确保组件注入服务时，所有必要的变量都已准备就绪。

1. 修改服务代码 #

将初始化逻辑移到专门的initialize方法中：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class SomeService {
    // 声明需要初始化的类变量
    private serviceData: any;

    constructor(private http: HttpClient){}

    // 封装初始化逻辑
    async initialize(): Promise<void> {
        // 执行HTTP请求并等待结果
        const response = await this.http.get('/api/your-data').toPromise();
        // 初始化类变量
        this.serviceData = response;
        // 其他耗时初始化操作
        // ...
    }

    useThisService(){
       // 直接访问已初始化的变量
       console.log(this.serviceData);
       // ... 业务逻辑
    }
}

2. 配置APP_INITIALIZER #

在app.module.ts中注册初始化器，确保应用启动前执行服务的initialize方法：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { SomeService } from './some.service';

// 定义初始化工厂函数
export function initSomeService(service: SomeService) {
  return () => service.initialize();
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    SomeService,
    {
      provide: APP_INITIALIZER,
      useFactory: initSomeService,
      deps: [SomeService],
      multi: true // 允许多个初始化器
    }
  ]
})
export class AppModule { }

3. 组件直接调用 #

此时组件的ngOnInit可以直接调用服务方法，无需任何异步处理：

import { Component, OnInit } from '@angular/core';
import { SomeService } from './some.service';

export class SomeComponent implements OnInit{
    constructor(private service: SomeService){}

    ngOnInit(): void{
       this.service.useThisService(); // 不会再报错
    }
}

方案二：服务内部维护初始化Promise #

如果不需要在应用启动时就初始化服务，而是希望组件调用时再等待初始化完成，可以用Promise封装初始化状态，避免事件订阅。

1. 修改服务代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class SomeService {
    private serviceData: any;
    private initPromise: Promise<void>;

    constructor(private http: HttpClient){
        // 构造函数中启动初始化，但不阻塞
        this.initPromise = this.initialize();
    }

    private async initialize(): Promise<void> {
        const response = await this.http.get('/api/your-data').toPromise();
        this.serviceData = response;
        // 其他耗时操作
        // ...
    }

    // 封装方法，确保初始化完成后再执行逻辑
    async useThisService(): Promise<void> {
        await this.initPromise;
        // 访问初始化后的变量
        console.log(this.serviceData);
        // ... 业务逻辑
    }
}

2. 组件调用时使用async/await #

import { Component, OnInit } from '@angular/core';
import { SomeService } from './some.service';

export class SomeComponent implements OnInit{
    constructor(private service: SomeService){}

    async ngOnInit(): Promise<void> {
       await this.service.useThisService();
    }
}

方案对比 #

• APP_INITIALIZER方案：应用启动时完成初始化，组件无需处理异步，适合服务初始化是应用必需的场景；缺点是会延长应用启动时间（如果初始化耗时很长）。
• Promise方案：初始化延迟到组件首次调用时，不影响应用启动速度，适合非核心服务的初始化；组件只需用async/await等待，开销极低，无需事件订阅。

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