Angular4中使用Factory Provider时如何访问数据？附场景示例

先直接给结论：你没法直接通过注入APP_INITIALIZER来获取它的工厂函数返回值——因为APP_INITIALIZER本质是Angular的初始化钩子，它的作用是让应用在启动前等待指定的工厂函数执行完成，并不是用来提供可注入值的令牌。

那要怎么在组件中获取工厂里生成的值呢？分两种常见场景给你解决方案：

场景1：通过APP_INITIALIZER初始化全局配置，组件需要访问该配置 #

这种情况很常见，比如你要在应用启动时从后端拉取配置，然后让所有组件能访问。核心思路是用一个专门的服务来存储这个值，在APP_INITIALIZER的工厂函数里给这个服务赋值，之后组件注入这个服务就能拿到值了。

步骤1：创建存储配置的服务 #

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AppConfigService {
  private _configValue: string | null = null;

  // 设置配置值
  setConfig(value: string) {
    this._configValue = value;
  }

  // 获取配置值
  getConfig(): string | null {
    return this._configValue;
  }
}

步骤2：配置APP_INITIALIZER的工厂函数 #

这里模拟调用HTTP服务获取值（你可以替换成任何其他服务调用）：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AppConfigService } from './app-config.service';
import { HttpClient } from '@angular/common/http';

// 工厂函数：依赖AppConfigService和HttpClient，执行初始化逻辑
export function initAppConfig(appConfig: AppConfigService, http: HttpClient) {
  return () => {
    // 实际场景替换成你的API请求
    return http.get<string>('/api/app-config').subscribe({
      next: (value) => appConfig.setConfig(value),
      error: (err) => console.error('加载配置失败', err)
    });
    // 如果是同步逻辑，比如直接返回固定值：
    // appConfig.setConfig('foo@yahoo.com');
    // return Promise.resolve();
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initAppConfig,
      deps: [AppConfigService, HttpClient], // 声明工厂需要的依赖
      multi: true // 允许多个APP_INITIALIZER钩子
    }
  ]
})
export class AppModule {}

步骤3：在组件中获取值 #

import { Component, AfterViewInit } from '@angular/core';
import { AppConfigService } from './app-config.service';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  constructor(private appConfig: AppConfigService) { }

  ngAfterViewInit() {
    console.log('初始化的配置值：', this.appConfig.getConfig());
  }
}

场景2：用工厂函数创建某个服务的实例，组件需要注入该服务 #

如果你的需求是让SaModelService的实例通过工厂函数创建（比如依赖其他服务初始化），那不需要用APP_INITIALIZER，直接给SaModelService的令牌配置useFactory即可：

步骤1：修改SaModelService（可选，添加需要的属性/方法） #

import { Injectable } from '@angular/core';

@Injectable()
export class SaModelService {
  public modelValue: string | null = null;
}

步骤2：配置SaModelService的Factory Provider #

import { NgModule } from '@angular/core';
import { SaModelService } from './sa-model.service';
import { HttpClient } from '@angular/common/http';

// 工厂函数：创建并初始化SaModelService实例
export function saModelServiceFactory(http: HttpClient) {
  const service = new SaModelService();
  // 调用其他服务获取值，初始化service
  http.get<string>('/api/model').subscribe(value => {
    service.modelValue = value;
  });
  return service;
}

@NgModule({
  providers: [
    {
      provide: SaModelService,
      useFactory: saModelServiceFactory,
      deps: [HttpClient] // 工厂依赖的服务
    }
  ]
})
export class AppModule {}

步骤3：组件中注入SaModelService获取值 #

import { Component, AfterViewInit } from '@angular/core';
import { SaModelService } from './sa-model.service';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  constructor(private model: SaModelService) { }

  ngAfterViewInit() {
    console.log('SaModelService初始化后的值：', this.model.modelValue);
  }
}

为什么APP_INITIALIZER的返回值没法直接获取？ #

再补充下原理：APP_INITIALIZER是Angular内置的一个多值令牌，它的作用是收集一系列初始化函数，Angular会在应用启动前依次执行这些函数（等待异步函数完成），但这些函数的返回值并不会被注册为可注入的依赖——它只是个启动钩子，不是值提供者。

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