Angular 可编辑配置

Question

我需要制作一个可以在应用构建后修改的配置文件。我正在尝试关注 this guide

现在我有 config-init.service.ts

import { Injectable } from '@angular/core';
import { Response } from "@angular/http";
import { UriConfig } from "../shared/models/uri-config.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
    providedIn: 'root'
})
export class ConfigInitService {

    static settings: UriConfig;

    load(): Promise<void> {
        const file = 'assets/config/uris.json';
        return new Promise<void>((resolve, reject) => {
            this.http.get(file).toPromise().then((response: Response) => {
                ConfigInitService.settings = <UriConfig>response.json();
                console.log('Loading config');
                resolve();
            }).catch((err: any) => {
                reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
            });
        });
    }

    constructor(
        private http: HttpClient
    ) {
    }
}

在应用程序模块中

providers: [
        ...
        ConfigInitService,
        {
            provide: APP_INITIALIZER,
            useFactory: () => initializeApp,
            deps: [ConfigInitService],
            multi: true
        }
    ]
})
export class AppModule {
}

export function initializeApp(uriConfig: ConfigInitService) {
    console.log('app init');
    return () => uriConfig.load();
}

根据控制台，应用程序初始化时正在使用工厂，但是没有来自 load 函数的控制台消息，也没有依赖于这些设置的工作服务。

Answer 1

您正在通过 initializeApp 函数将函数传递给 useFactory，但是您可能有兴趣从 load 函数发送数据。您应该在 initializeApp 函数中进行小的更正，如 -

export function initializeApp(uriConfig: ConfigInitService) {
    console.log('app init');
    return uriConfig.load(); //<-- return the value from load function.
}

Answer 2

你能把promise部分移到函数里面吗？

load(): Promise<void> {
        const file = 'assets/config/uris.json';
    return () => {
        return new Promise<void>((resolve, reject) => {
            this.http.get(file).toPromise().then((response: Response) => {
                ConfigInitService.settings = <UriConfig>response.json();
                console.log('Loading config');
                resolve();
            }).catch((err: any) => {
                reject(`Could not load file "${file}": ${JSON.stringify(err)}`);
            });
        });
      }
    }

Answer 3

解决者

import { Injectable } from '@angular/core';
import { UriConfig } from "../shared/models/uri-config.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
    providedIn: 'root'
})
export class ConfigInitService {

    static settings: UriConfig;

    load() {
    }

    constructor(
        private http: HttpClient
    ) {
        this.http.get('assets/config/uris.json').subscribe((file: UriConfig) => {
            ConfigInitService.settings = file;
        });
    }
}

由于我的调查显示正在初始化服务，同时未调用函数，因此我在构造函数中放置了简单的 http GET 请求并获得了我需要的结果。

Angular 可编辑配置

Angular editable config

config

typescript

angular