问根据浏览器语言设置角度LOCALE_ID
EN

Stack Overflow用户

提问于 2019-02-14 02:50:59

回答 2查看 10.4K关注 0票数 5

我试图在我的多语言应用程序中使用Kendo组件。为了正确地格式化日期，Kendo要求从角度设置LOCALE_ID。我不知道怎样才能干净利落地完成那件事。

目前，我正在使用HTTP_ACCEPT_LANGUAGE来查找应该以哪种语言服务我的应用程序。我在我的nginx.conf里这样做

# Parse AcceptLanguage header
  # en,es,pl,fr
  # en,es;q=0.8,pl;q=0.7,fr;q=0.6
  set $first_language $http_accept_language;
  if ($http_accept_language ~* '^(.+?),') {
    set $first_language $1;
  }

  set $language_suffix 'en';
  if ($first_language ~* 'fr') {
    set $language_suffix 'fr';
  }

  root /usr/share/nginx/html/$language_suffix;

这个很管用。使用正确的.xlf文件，并显示消息翻译。

现在，我需要设置LOCALE_ID以使我的Kendo组件以正确的格式呈现日期。我试图通过获取浏览器当前语言来设置它。我是如何做到这一点的：

app.module.ts

...
import { LOCALE_ID, NgModule } from '@angular/core';
import { LocaleService } from './shared/service/locale.service';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    {
      provide: LOCALE_ID,
      deps: [LocaleService],
      useValue: (localeService) => localeService.getLanguage()
    }
  ],
})

locale.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocaleService {

  constructor() { }

  getLanguage() {
    // return navigator.language || navigator.userLanguage
    return 'fr-FR';
  }
}

我从Kendo组件中得到这个错误消息。

ERROR TypeError: value.replace is not a function
    at CldrIntlService.set [as localeId] (cldr-intl.service.js:38)
    at new CldrIntlService (cldr-intl.service.js:24)
    at _createClass (core.js:19829)
    at _createProviderInstance (core.js:19801)
    at resolveNgModuleDep (core.js:19765)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473)
    at resolveDep (core.js:20844)
    at createClass (core.js:20724)
    at createDirectiveInstance (core.js:20595)
    at createViewNodes (core.js:21821)

如果我这样设置它，它就会起作用：

{ provide: LOCALE_ID, useValue: 'fr-FR' }

我是个初学者，还在寻找自己的出路。我错过了什么？这是实现这一目标的正确途径吗？

我的灵感来自：

localization

kendo-ui-angular2

angular

kendo-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-14 04:32:33

也许您应该使用FactoryProvider实例化您的可注入性并返回区域设置值，例如：

providers: [
    {
      provide: LOCALE_ID,
      useFactory: (localeService: LocaleService) => {
        console.log('locale ID', localeService.language);
        return localeService.language;
      },
      deps: [LocaleService]
    }
  ],

请参阅这个相关的问题

票数 1

Stack Overflow用户

发布于 2020-06-03 06:49:39

下面是对我有用的代码(添加到providers列表中的app.module)：

    {
        provide: LOCALE_ID,
        useValue: navigator.language,
    },

我还在导入和注册受支持的地区，不确定这是必要的：

import { registerLocaleData } from '@angular/common'    
import localeEnAu from '@angular/common/locales/en-AU'
...
registerLocaleData(localeEnAu)
...