尝试在用户更改页面语言时翻译 NgPickDateTime 标签

Question

我在我的 Angular 应用程序 ( https://danielykpan.github.io/date-time-picker/ ) 中使用 NgPickDatetime，当我尝试翻译标签和消息时遇到问题。我按照文档中的说明操作，它工作正常，但问题是当我更改站点语言时，标签仍然使用以前的语言。

我的代码是：

日期时间-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;
        }
    }
};

所以我试图getLang()在用户更改语言时将 ngx-translate 添加到组件和重新加载功能，但它不起作用，因为我收到以下错误：

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;
        }
    }
};