如何在 Angular 2 应用程序中制作 DateAdapter 单例？答案

【问题标题】：How to make DateAdapter singleton in angular 2 app?如何在 Angular 2 应用程序中制作 DateAdapter 单例？
【发布时间】：2019-04-17 03:20:39
【问题描述】：

我正在开发一个带有延迟加载模块的 Angular 7 应用程序。我也在使用角材料组件。我想在 datepicker 组件中本地化并支持多个语言环境。

我想在应用程序语言更改时为整个应用程序全局更改它。它可以通过 DateAdapter.setLocale 方法完成。但是问题是，如果我在根模块上更改它，那么它不会在延迟加载的模块中更改。

是的，延迟加载的模块有它们的注入器并接收它们的 DateAdapter，其中的语言环境未设置为正确的。

如何实现整个应用中的 DateAdapter 是单例的？对于其他模块，有 forChild() 与 forRoot() API，但不适用于 datepicker 模块。

【问题讨论】：

你可以在你的单例服务中使用providedIn: 'root'，然后，当你需要使用它时，使用@Inject(DateAdapter)，这样angular就知道它需要注入服务实例。
@briosheje 嗯，好的，但如果我理解正确，那么应该在每个延迟加载的模块中使用这个服务来设置 dateAdapter 语言环境。我对吗？我想在我的根组件中注入 DateAdapter 并调用一次 setLocale() 并在每个延迟加载模块中更改语言环境。

标签： javascript angular typescript angular7

【解决方案1】：

对我来说，问题是我将 DateAdapter 导入到 SharedModule 中，然后将 SharedModule 导入到 AppModule 和其他 LazyModules 中。

要使DateAdapter 成为单例服务，您应该提供DateAdapter，您只在应用程序的根级别使用一次，而不是在根级别和LazyModules 中。

为此，请确保导入提供 DateAdapter 的模块，例如MatNativeDateModule，仅在您的 AppModule 中（或另一个只导入一次的根模块，如 CoreModule）。不要在多个模块中或在像 SharedModule 一样多次导入的模块中导入 MatNativeDateModule。

import { MatNativeDateModule } from '@angular/material/core'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后您可以在 AppComponent 中设置语言环境。

export class AppComponent implements OnInit {
  constructor(private dateAdapter: DateAdapter<Date>) {}

  ngOnInit(): void {
    this.dateAdapter.setLocale('en')
  }
}

具有设置区域设置的相同 DateAdapter 将被注入到您的 LazyModules 中。

【讨论】：

谢谢它非常有帮助！虽然我想了解它是如何解决问题的，AFAIK 虽然模块总是共享的，但提供者总是在惰性模块上重新创建，除非你通过返回 @ 的静态方法导出它们987654333@ 并在根模块中调用该静态方法，这显然不是这里的情况。
@RafiHenig 创建惰性模块时，根注入器中的所有提供程序都将复制到惰性模块的子注入器。所以惰性模块使用与根模块相同的提供程序。此提供程序将向惰性模块提供与向根模块提供相同的 DateAdapter 实例。