Как сделать переводы для NgbDatepicker в Angular без подкласса NgbDatepickerI18n?

#angular #ng-bootstrap #angular-i18n #ngb-datepicker

#angular #ng-bootstrap #angular-i18n #ngb-datepicker

Вопрос:

В настоящее время я читаю об интернационализации ng-bootstrap компонентов. В их документации указано для выбора даты:

Начиная с версии 2.0.0, datepicker будет использовать язык приложения, если он присутствует, для получения переводов названий дней недели и месяцев. Внутренняя служба, которая выполняет перевод, называется NgbDatepickerI18n, и при необходимости вы можете предоставить свою собственную реализацию.

(веб-сайт ng-bootstrap)

Просматривая документацию Angular i18n, в ней говорится:

Если вы хотите импортировать данные локали для других языков, вы можете сделать это вручную:

src/приложение/app.module.ts

 import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');
  

(Веб-сайт Angular)

Но почему у меня это не работает? Нужно ли мне все еще создавать пользовательскую реализацию NgbDatepickerI18n , или я что-то упускаю?


Вот пример игровой площадки:

https://stackblitz.com/edit/angular-mezpyn?file=app/datepicker-popup.module.ts

Ответ №1:

У меня была такая же проблема, и, поскольку ответа нет, это решение:

После импорта и регистрации данных локали, как вы это делали, в app.module.ts, который вам нужно добавить

 providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' },
    ... other providers
],
  

Документация, на мой взгляд, не проясняет это.

Комментарии:

1. Я хотел бы, чтобы я мог проголосовать за это более одного раза. Наконец-то кто-то, кто знает, как изменить язык с использованием данных I18n.

2. Откуда LOCALE_ID импортируется @angular/core . Я только сейчас заметил этот ответ, спасибо!

3. у вас есть рабочий пример для этого? В приведенном выше стекблите дни по-прежнему указаны на английском языке.

4. @user2622344 см. stackblitz.com/edit /… для рабочего примера

5. Я сделал это, как вы сказали, следующим образом { provide: LOCALE_ID, useValue: ‘fr-FR’ }, { provide: LOCALE_ID, useValue: ‘en-EN’ }, { provide: LOCALE_ID, useValue: ‘nl-NL’ } но datepicker использует только последнего поставщика, которого я объявляю (nl), и не реагирует на изменение языка приложения. Чего мне не хватает?