如何让Angular 5在注入依赖或执行ngOnInit前等待Injectable构造函数内的Promise解析

我明白你的痛点——不想让每个组件都去处理异步状态，希望服务在注入时就已经准备好所有数据。这里有个完美的解决方案，用Angular的APP_INITIALIZER就能实现你的需求，而且几乎不需要改动现有组件代码：

APP_INITIALIZER是Angular提供的一个特殊令牌，它允许我们在应用启动前执行异步任务，Angular会等待所有注册的初始化任务完成后，再继续加载组件和注入服务。正好匹配你“让服务先完成Promise解析再注入”的需求。

步骤1：修改FooService，提取初始化方法 #

把原来构造函数里的异步逻辑移到一个公开的init()方法中，让它返回Promise，供Angular等待：

@Injectable({ providedIn: 'root' })
export class FooService {
  isIncognito: boolean = null;

  constructor() {
    // 这里不再直接执行异步逻辑，交给初始化器处理
  }

  // 新增初始化方法，返回Promise让Angular等待
  init(): Promise<void> {
    return FooService.isIncognitoWindow()
      .then(isIncognito => {
        this.isIncognito = isIncognito;
      });
  }

  private static isIncognitoWindow(): Promise<boolean> {
    return new Promise<boolean>((resolve, reject) => {
      let rfs = window['requestFileSystem'] || window['webkitRequestFileSystem'];
      if (!rfs) {
        console.warn("window.RequestFileSystem not found.");
        resolve(false);
      }
      const typeTemporary = 0;
      rfs(
        typeTemporary,
        100,
        function(fso: WebKitFileSystem) {
          resolve(false);
        },
        function(err: any) {
          resolve(true);
        }
      );
    });
  }
}

步骤2：在AppModule中配置初始化器 #

在根模块里注册APP_INITIALIZER，指定要执行FooService的init()方法：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FooService } from './foo.service';

// 定义初始化工厂函数，依赖FooService并调用其init方法
function initializeFooService(fooService: FooService) {
  return () => fooService.init();
}

@NgModule({
  // ...你的其他模块配置（declarations、imports等）
  providers: [
    FooService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeFooService,
      deps: [FooService], // 声明依赖的服务
      multi: true // 允许同时注册多个初始化器
    }
  ]
})
export class AppModule { }

步骤3：组件无需任何改动 #

现在当组件注入FooService时，isIncognito已经完成初始化，你可以直接在ngOnInit里使用，完全不用处理异步逻辑：

@Component({
  moduleId: module.id,
  templateUrl: 'auth.component.html'
})
export class AuthComponent implements OnInit {
  constructor(private fooService: FooService) { }

  ngOnInit(): void {
    // 这里可以直接使用this.fooService.isIncognito，它已经有值了！
    if (this.fooService.isIncognito) {
      console.log('当前处于无痕模式');
    } else {
      console.log('当前处于普通模式');
    }
  }
}

方案优势 #

• 零组件重构：现有所有使用FooService的组件都不需要修改，直接沿用原有逻辑
• 全局一次性初始化：异步逻辑只会执行一次，避免重复调用
• 侵入性极低：只需要修改服务和根模块配置，不影响业务代码

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