Попытка перевести метки NgPickDateTime, когда пользователь изменяет язык страницы

Question

Я использую NgPickDatetime в своем приложении Angular (https://danielykpan.github.io/date-time-picker/)), и у меня возникает проблема при попытке перевести метки и сообщения. Я следую инструкциям в документации, и это работает нормально, но проблема в том, что когда я меняю язык сайта, ярлыки остаются на прежнем языке.

Мой код:

DateTime-locale.module.ts:

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';
import { DefaultIntl } from './datepicker-locale.component';


@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OwlDateTimeIntl, useClass: DefaultIntl},
    ],
})
export class DateTimeLocaleModule {
}

Datepicker-locale.component.ts:

import { OwlDateTimeIntl } from 'ng-pick-datetime';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor() {
        super();

        this.getLang();
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language"));

        switch (this.currentLang.id) {
            case 'en':
                this.cancelBtnLabel = 'Cancel';
                this.setBtnLabel = 'Set';
                break;
            case 'nl':
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
            default:
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
        }
    }
};

Поэтому я пытаюсь добавить ngx-translate к компоненту и перезагрузить функцию getLang(), когда пользователь меняет язык, но это не работает, потому что я получаю следующую ошибку:

Uncaught Error: Can't resolve all parameters for DefaultIntl: (?).

Полный код компонента с услугой перевода:

import { OwlDateTimeIntl } from 'ng-pick-datetime';
import { TranslateService } from '@ngx-translate/core';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor(private translate: TranslateService) {
        super();

        this.getLang();

        this.translate.onLangChange.subscribe(lang => {
            this.getLang();
        });
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language"));

        switch (this.currentLang.id) {
            case 'en':
                this.cancelBtnLabel = 'Cancel';
                this.setBtnLabel = 'Set';
                break;
            case 'nl':
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
            default:
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
        }
    }
};

Мне нужно использовать службу перевода, но я не могу сделать это в компоненте. Есть ли решение этой проблемы?

Спасибо !!!

Answer 1

Я решил добавить это:

@Inject(TranslateService) private translate

в конструктор, полный код:

import { OwlDateTimeIntl } from 'ng-pick-datetime';
import { TranslateService } from '@ngx-translate/core';
import { Inject } from '@angular/core';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor(@Inject(TranslateService) private translate) {
        super();

        this.getLang();

        this.translate.onLangChange.subscribe(lang => {
            this.getLang();
        });
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language"));

        switch (this.currentLang.id) {
            case 'en':
                this.cancelBtnLabel = 'Cancel';
                this.setBtnLabel = 'Set';
                break;
            case 'nl':
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
        }
    }
};

Answer 2

Для установки меток выбора даты Отмена и Установка без регионализации:

Создание компонента и расширение OwlDateTimeIntl:

import { OwlDateTimeIntl } from 'ng-pick-datetime';

export class SetPickerLabels extends OwlDateTimeIntl {
public cancelBtnLabel = 'TEXT FOR CANCEL';
public setBtnLabel = 'TEXT FOR SET';
};

В модуле, куда вы импортировали ng-pick-datetime , импортируйте компонент и используйте в качестве класса для поставщика OwlDateTimeIntl:

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';
import { SetPickerLabels } from './set-picker-labels.component';


@NgModule({
imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
providers: [
    {provide: OwlDateTimeIntl, useClass: SetPickerLabels},
],
})

Проверено на угловых 6 и угловых 7

Answer 3

Я думаю, вам придется импортировать TranslateModule, чтобы помочь вашему модулю DateTimeLocaleModule понять, что такое TranslateService

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl } from 'ng-pick-datetime';
import { DefaultIntl } from './datepicker-locale.component';

@NgModule({
  imports: [
    OwlDateTimeModule, 
    OwlNativeDateTimeModule,
    TranslateModule.forRoot()
  ],
  providers: [{
    provide: OwlDateTimeIntl,
    useClass: DefaultIntl
  }],
})
export class DateTimeLocaleModule {}

Я думаю, что Angular действительно не знал о TranslateService, который выставляется как часть TranslateModule, и именно поэтому он выдавал эту ошибку. хотя с этим изменением все должно работать как положено.