Question

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

我的代码是：

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

我认为您必须导入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，这就是为什么会出现此错误的原因。进行此更改后，它应该可以按预期运行。

Answer 3

要设置日期选择器标签，请取消和设置而不进行区域化：

创建一个组件并扩展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},
],
})

在Angular 6和Angular 7上进行了测试

当用户更改页面lang

3 个答案: