国际化 - 加载许多区域设置和补充数据

Question

该示例仅显示1个区域设置的加载，即bg。 我们如何加载所有语言环境，以便我们可以动态更改语言环境。提前谢谢！

http://plnkr.co/edit/Ucx0SlcmBfN9TRjrS5Ad?p=preview Plunker

Answer 1

[简答]

您无法动态更改Angular应用程序的语言环境，无需重新创建模块/组件。

[长版]

Angular组件的语言环境由LOCALE_ID确定，http://plnkr.co/edit/gmAWVLD1Yzn353QA1eDj?p=preview通过Angular DI系统注入。考虑到Angular使用基于构造函数的依赖注入的事实，需要重新创建组件以便接收新的LOCALE_ID值。

话虽这么说，让组件/模块具有不同语言环境的唯一可行解决方案是用高阶组件包装它们，这将提供不同的LOCALE_ID：

@Component({
  selector: 'bg',
  providers: [{
    provide: LOCALE_ID,
    useValue: 'bg-BG'
  }, { 
    provide: IntlService,
    useFactory: (localeId: string) => new CldrIntlService(localeId),
    deps: [LOCALE_ID]
  }],
  template: `
    <ng-content></ng-content>
  `
})
export class BGComponent {
}

这是runnable演示：

请注意，plunker演示了如何在一个页面上放置具有不同区域设置的组件。正如我所提到的，不可能完全动态地改变语言环境（当然，排除所有可能的黑客攻击）。如果使用LOCALE_ID有一个很好的解决方案，我会非常乐意看到它。