Angular 2 Value Providers - 在初始化时从 API 调用设置的值答案

【问题标题】：Angular 2 Value Providers - Values set from API call at initializationAngular 2 Value Providers - 在初始化时从 API 调用设置的值
【发布时间】：2016-06-25 22:03:20
【问题描述】：

我需要为我们的应用程序提供日期格式。我们使用它来设置所有日期显示和输入的格式。

我需要在应用程序的许多地方提供此信息。但是，日期因客户而异。我们有一个 API 调用，它以 JSON 对象的形式提供各种设置（其中之一是日期配置）。

我希望能够通过 DI 提供一个将配置选项表示为值的对象。提供值的例子很多，但它们都是静态的而不是动态的。

我想在我的 DI 组合根目录中做这样的事情

provide('DateFormat', {
  useValue: 'dd/MM/yyyy'  
})

但是，我希望 'dd/MM/yyyy' 来自启动时的设置。

我尝试通过服务提供它，但它在一些地方导致了竞争条件问题（当一项服务运行时值不可用）。其中一些可以通过使用更多的 observable 重写来解决，但这只会使代码更复杂。所以我想要某种方式通过 DI 提供对象并在做任何其他事情之前设置值。

任何想法如何实现这一目标？

【问题讨论】：

标签： dependency-injection angular angular2-services

【解决方案1】：

如果您在引导程序中或在应用程序根组件的 providers:[] 中提供服务，它将实例化该服务。在服务构造函数中，您可以通过 api 获取数据。

如果您需要等到它在第一页显示之前加载，您可以有一个指示数据已加载或未加载的 observable。通过订阅可观察对象，使用该可观察对象路由到新组件。或者根据您应用的结构，在服务设置的 boolean observable 上使用 *ngIf 以显示初始化屏幕，直到 api 调用返回并初始化数据。

任何其他需要该配置的组件都可以通过构造函数参数注入来使用该服务实例。

import {ConfigurationService} from 'path/to/configuration-service';

@Component({
    selector : '',
    providers: [ConfigurationService] <<-- This instantiates a new
    uninitialized service. Do this only in the root component.


})

export ComponentNeedingDateFormat() {
    constructor(private configurationService: ConfigurationService) { }
}

如果您将它包含在组件提供程序中：[] 它将实例化一个新服务。您只想在根组件中注入它。

https://angular.io/docs/ts/latest/guide/dependency-injection.html

【讨论】：