Angular 2- ngxDaterangepickerMd 多语言答案

【问题标题】：Angular 2- ngxDaterangepickerMd multilanguageAngular 2- ngxDaterangepickerMd 多语言
【发布时间】：2020-10-20 08:38:41
【问题描述】：

在 Angular 2 中，我有带有一些自定义标签的日期范围选择器。代码是

HTML

<input type="text" ngxDaterangepickerMd [locale]="pickerlang" [(ngModel)]="selected"
                      class="form-control" placeholder="{{'date-range' | translate}}" name="selected" [ranges]="ranges"
                      [showCustomRangeLabel]="true" [alwaysShowCalendars]="tr

ue" />

还有标签

 this.ranges = {
      Hoy: [moment(), moment()],
      Ayer: [moment().subtract(1, "days"), moment().subtract(1, "days")],
      "Últimos 7 días": [moment().subtract(6, "days"), moment()],
      "Últimos 30 días": [moment().subtract(29, "days"), moment()],
      "Este mes": [moment().startOf("month"), moment().endOf("month")],
      "Mes pasado": [
        moment()
          .subtract(1, "month")
          .startOf("month"),
        moment()
          .subtract(1, "month")
          .endOf("month")
      ]
    };

我需要根据页面语言以编程方式更改标签。我尝试使用 this.translate.instant('label') 但不起作用。那么，使用ngx-translate 转换数组元素的正确方法是什么？

【问题讨论】：

标签： angular date-range

【解决方案1】：

我们遇到了类似的问题，我们使用 this.translate.instant('label') 解决了它。在您的 .ts 文件中，您需要订阅语言更改，例如：

this.languageSubscription = this.translate.onLangChange.subscribe(() => {
  this.ranges = this.populateDatePickerPredefinedRangeLabels();
});

填充范围的方法应该是这样的：

populateDatePickerPredefinedRangeLabels() {
  let ranges = {};

  let today = this.translate.instant("GRAPH.TODAY");
  let yesterday = this.translate.instant("GRAPH.YESTERDAY");
  let last7Days = this.translate.instant("GRAPH.LAST_7_DAYS");
  let last30Days = this.translate.instant("GRAPH.LAST_30_DAYS");
  let thisMonth = this.translate.instant("GRAPH.THIS_MONTH");
  let lastMonth = this.translate.instant("GRAPH.LAST_MONTH");

  ranges[today] = [moment(), moment()];
  ranges[yesterday] = [
    moment().subtract(1, "days"),
    moment().subtract(1, "days"),
  ];
  ranges[last7Days] = [moment().subtract(6, "days"), moment()];
  ranges[last30Days] = [moment().subtract(29, "days"), moment()];
  ranges[thisMonth] = [moment().startOf("month"), moment().endOf("month")];
  ranges[lastMonth] = [
    moment().subtract(1, "month").startOf("month"),
    moment().subtract(1, "month").endOf("month"),
  ];

  return ranges;
}

更改语言后，“范围将填充新值，并且日期范围选择器将被刷新。

【讨论】：