Angular：能否延迟创建服务并等待异步初始化完成后再注入？

我有一个需要异步获取数据进行初始化的服务，其构造函数逻辑如下：

this.httpClient
.get<DataType>(`someUrl`)
.subscribe(data => this.data = data);

该服务包含如下方法：

someService() {
    // do something with this.data
}

问题在于：首次显示使用该服务的视图时，Angular会动态创建该服务，但视图会在服务完全初始化前调用someService()方法，导致报错；再次显示同一视图时，服务已准备就绪，可正常工作。

我希望避免让服务返回Promise的复杂实现，想知道是否可以延迟创建服务，等待异步初始化完成后再注入？

已尝试的方案：

• 使用APP_INITIALIZER：在app.module中配置如下，能在应用启动时创建并初始化服务，但会为所有用户初始化该服务，而部分用户无相关权限，存在问题。

  { provide: APP_INITIALIZER, useFactory: onInitializeTheService, deps: [TheService], multi: true }
  

• 尝试为服务使用工厂函数：在AppModule配置{ provide: TheService, useFactory: createTheService }，工厂函数定义为export function createTheService() : Promise<TheService>，但未成功。

方案1：通过路由守卫延迟视图加载 #

利用Angular的CanActivate路由守卫，控制对应视图的加载时机，仅当服务初始化完成后才允许进入路由，既能避免初始化前调用方法报错，又能仅在用户访问该视图时才初始化服务：

1. 改造服务，暴露初始化完成的信号

@Injectable({ providedIn: 'root' })
export class TheService {
  private dataReady$: Observable<boolean>;
  private data: DataType;

  constructor(private httpClient: HttpClient) {
    // 用shareReplay缓存请求结果，避免重复发起请求
    this.dataReady$ = this.httpClient.get<DataType>('someUrl')
      .pipe(
        tap(data => this.data = data),
        map(() => true),
        shareReplay(1)
      );
  }

  // 对外提供等待初始化完成的方法
  waitForInit(): Observable<boolean> {
    return this.dataReady$;
  }

  someService() {
    // 此时this.data已确保初始化完成
    // do something with this.data
  }
}

2. 创建路由守卫

@Injectable({ providedIn: 'root' })
export class ServiceInitGuard implements CanActivate {
  constructor(private theService: TheService) {}

  canActivate(): Observable<boolean> {
    // 等待服务初始化完成后，才允许进入路由
    return this.theService.waitForInit();
  }
}

3. 在路由配置中添加守卫

const routes: Routes = [
  {
    path: 'your-target-view',
    component: YourTargetComponent,
    canActivate: [ServiceInitGuard]
  }
];

方案2：修正工厂函数实现 #

Angular的依赖注入支持工厂函数返回Promise<T>，只要正确配置依赖并处理异步逻辑即可实现延迟注入：

1. 调整服务构造函数
   移除构造函数中的异步订阅逻辑，改为由工厂函数处理初始化：

@Injectable()
export class TheService {
  public data: DataType;

  constructor(private httpClient: HttpClient) {}

  someService() {
    // do something with this.data
  }
}

2. 实现正确的工厂函数

export function createTheService(httpClient: HttpClient): Promise<TheService> {
  const service = new TheService(httpClient);
  // 发起请求并完成初始化后返回服务实例
  return httpClient.get<DataType>('someUrl')
    .toPromise()
    .then(data => {
      service.data = data;
      return service;
    });
}

3. 在模块中配置工厂函数

@NgModule({
  providers: [
    {
      provide: TheService,
      useFactory: createTheService,
      deps: [HttpClient] // 注入工厂函数所需的HttpClient依赖
    }
  ]
})
export class AppModule {}

这种方式下，Angular会等待Promise完成后才会将服务实例注入到组件中，首次注入时会等待初始化完成，后续注入会复用已初始化的实例。

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