在服务加载配置文件之前,Angular 5会阻止应用程序就绪

时间:2018-04-03 19:49:18

标签: angular

在服务加载了json文件之前,是否有一种防止应用程序正式加载的Anguarly方法?我托管了一个config.json文件,该文件存储了所有端点路径和一些尚未完成加载的元数据,然后才开始请求它。

this.document.body.scrollHeight

我尝试在主App.module.ts中执行此操作以尝试尽可能多地给它,但是在其他服务开始请求之前它仍然没有加载该文件。

@Injectable()
export class ConfigurationService {

  private Configuration: Configuration;

  constructor(private Web: Http)
  {
    this.LoadConfig();
  }

  public GetConfig(): Configuration
  { 
    var b = this.Configuration;
    return this.Configuration;
  }

  public Loaded(): boolean
  { 
    return this.Configuration != null;
  }

  private LoadConfig(): void
  {
    var getConfig = this.Web.get('/assets/config.json').map(res => res.json() as Configuration).subscribe(data =>
    {
      this.Configuration = data;
    });
  }

}

1 个答案:

答案 0 :(得分:1)

在app.module.ts

中执行以下操作
import { APP_INITIALIZER } from '@angular/core';

export function startupAppConfigs(appConfigs: ConfigurationService): Function {
    return () => appConfigs.LoadConfig();
}

@NgModule({
    providers: [ {
        // Provider for APP_INITIALIZER
        provide: APP_INITIALIZER,
        useFactory: startupAppConfigs,
        deps: [ConfigurationService],
        multi: true
    }
    .....

注意:使LoadConfig()方法返回promise。请参阅下面的代码段:

public LoadConfig()
  {
    return new Promise((resolve, reject) =>
    {
      this.Web.get('/assets/config.json')
      .map(res => res.json() as Configuration)
      .subscribe(data =>
      {
        this.Configuration = data;
        resolve(true);
      });
    });
  }