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

您正在通过useFactory函数将函数传递给initializeApp，但是您可能希望从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请求并获得了所需的结果。

角度可编辑配置

3 个答案: