angular - 在其他提供商中使用 APP_INITIALIZER

Question

我正在使用 APP_INITIALIZER Hook 从本地 json 文件加载一些应用配置。加载配置后，我想在另一个提供程序中使用它(为我生成的 swagger-codegen 服务设置 BASE_PATH)。

我收到此错误:Uncaught TypeError: Cannot read property 'api' of undefined

我尝试访问 AppInitService.settings.api 的值是 AppInitService 上的静态属性。我怀疑这是问题所在，但据我所知，APP_INITIALIZER Hook 应该保证在继续之前等待......

如何等待值加载到 APP_INITIALIZER 中并准备好在其他提供程序 useValue 中重用？

app.module.ts

    export function initializeApp(appConfig: AppInitService) {
        return (): Promise<any> => appConfig.init()
    }

    @NgModule({
        declarations: [...],
        imports: [...],
        providers: [
            AppInitService,
            {
                provide: APP_INITIALIZER,
                useFactory: initializeApp,
                deps: [AppInitService],
                multi: true,
            },
            {
                provide: BASE_PATH,
                useValue: AppInitService.settings.api,
            },
        ],

app.config.service.ts

    @Injectable()
    export class AppInitService {
        static settings: IAppConfig
        private conf: IAppConfig

        constructor(private http: HttpClient) {}

        public getConf() {
            return this.conf
        }

        init() {
            const jsonFile = `assets/config/config.json`
            return this.http
                .get(jsonFile)
                .pipe(
                    tap((returnedConfig: IAppConfig) => {
                        console.log('returnedConfig', returnedConfig)
                        AppInitService.settings = returnedConfig
                        this.conf = returnedConfig
                    })
                )
                .toPromise()
        }
    }

Answer 1

您可以使用工厂供应商。

{
    provide: BASE_PATH,
    useFactory: (service: AppInitService) => service.conf, // doesn't need to be static
    deps: [AppInitService]
}

Angular 只会在第一次解析提供者时调用工厂函数，但您只是假设它将在以后解析。它现在可能可以工作，但稍后可能会中断或根本无法工作。

相反，使用可观察值作为可注入(inject)值。

@Injectable()
public class AppInitService {
    public conf: ReplaySubject<any> = new ReplaySubject(1);

    init() {
       const jsonFile = `assets/config/config.json`
       return this.http
            .get(jsonFile)
            .pipe(
                tap((returnedConfig: IAppConfig) => this.conf.next(returnedConfig))
            ).toPromise()
    }
}