如何专门使用矩区域设置来本地化 ng-bootstrap datepicker？

Question

我在我的 Angular 项目中使用 ng-bootstrap DatePicker。

如果没有为每种语言专门指定 I18N_VALUES 值并利用 moment 库，我必须将其国际化并动态更改语言。请让我吧。

这是一个 Stackblitz 示例：

堆栈闪电战

Answer 1

他们的主要变化是：

对于日期选择器支持的所有语言，我们应该导入

locale data

，如下面的方法所示：

import moment from 'moment';
import 'moment/locale/fr';

然后，我们可以摆脱

locale

属性，直接更新包含日期选择器使用的

I18n

的

language

服务。

@Injectable()
export class DatepicketLocalizationService extends NgbDatepickerI18n {
  private locale: string;
  constructor(private _i18n: I18n, private localeService: LocaleService) {
    super();
    this.localeService.locale$.subscribe((locale) => {
      this._i18n.language = locale;
    });
  }

  getWeekdayShortName(weekday: number): string {
    console.log(
      this._i18n.language,
      moment()
        .locale(this._i18n.language)
        .weekday(weekday - 1)
        .format('dd'),
      moment().locale()
    );
    return moment()
      .locale(this._i18n.language)
      .weekday(weekday - 1)
      .format('dd');
  }

最后，没有简单的方法可以使日期选择器重新加载到新的语言环境，但我可以使用下面的代码让它工作。理想情况下，应该有一个简单的刷新按钮来重新呈现日期选择器。

refreshDatepicker() {
  if (this.datepicker) {
    console.log('refresh 1');
    this.cdr.detectChanges();
    this.datepicker.focus();
    this.datepicker._service.focusSelect();
  }
}

完整代码：

datepicker.component.ts

import {
  ChangeDetectorRef,
  Component,
  Injectable,
  ViewChild,
} from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { LocaleService } from './localeService.service';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'datepicker-i18n',
  templateUrl: './datepicker.template.html',
})
export class DatePickerComponent {
  model: NgbDateStruct;
  @ViewChild('dp', { static: true }) datepicker: NgbDatepicker;

  constructor(
    private localeService: LocaleService,
    private cdr: ChangeDetectorRef
  ) {}

  changeLocale(locale: string) {
    this.localeService.setLocale(locale);
  }

  ngOnInit() {
    this.localeService.locale$.subscribe(() => {
      this.refreshDatepicker();
    });
  }

    refreshDatepicker() {
      if (this.datepicker) {
        console.log('refresh 1');
        this.cdr.detectChanges();
        this.datepicker.focus();
        this.datepicker._service.focusSelect();
      }
    }
}

datepicker-localization.service.ts

import { Component, Injectable } from '@angular/core';
import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { LocaleService } from './localeService.service';
import moment from 'moment';
import 'moment/locale/fr';

@Injectable()
export class I18n {
  language = 'de';
}

@Injectable()
export class DatepicketLocalizationService extends NgbDatepickerI18n {
  private locale: string;
  constructor(private _i18n: I18n, private localeService: LocaleService) {
    super();
    this.localeService.locale$.subscribe((locale) => {
      this._i18n.language = locale;
    });
  }

  getWeekdayShortName(weekday: number): string {
    console.log(
      this._i18n.language,
      moment()
        .locale(this._i18n.language)
        .weekday(weekday - 1)
        .format('dd'),
      moment().locale()
    );
    return moment()
      .locale(this._i18n.language)
      .weekday(weekday - 1)
      .format('dd');
  }

  getMonthShortName(month: number): string {
    return moment()
      .locale(this._i18n.language)
      .month(month - 1)
      .format('MMM');
  }

  getMonthFullName(month: number): string {
    return moment()
      .locale(this._i18n.language)
      .month(month - 1)
      .format('MMMM');
  }

  getDayAriaLabel(date: NgbDateStruct): string {
    return moment([date.year, date.month - 1, date.day])
      .locale(this._i18n.language)
      .format('LL');
  }
}

Stackblitz 演示