Установите угловой LOCALE_ID в соответствии с языком браузера - PullRequest
Новая
       7

Установите угловой LOCALE_ID в соответствии с языком браузера

0 голосов
/ 14 февраля 2019

Я пытаюсь использовать компоненты Kendo в своем мультиязычном приложении.Чтобы правильно отформатировать даты, Kendo требовалось установить LOCALE_ID из Angular.Я не уверен, как это сделать чистым способом.

В настоящее время я использую 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' }

Я новичок, все еще пытаюсьчтобы найти свой путь вокруг Angular.Что я упустил?Это правильный путь для достижения этого?

Я вдохновляюсь на:
- Как установить локаль в DatePipe в Angular 2?
- Определение языка браузера

1 Ответ

0 голосов
/ 14 февраля 2019

Может быть, вам следует использовать FactoryProvider , чтобы создать экземпляр вашего языка для инъекций и вернуть значение локали, например: 

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

См. этот связанный вопрос

...