Angular Moment - 使用自定义语言环境对象更改语言环境答案

【问题标题】：Angular Moment - Change Locale with customized locale objectAngular Moment - 使用自定义语言环境对象更改语言环境
【发布时间】：2016-07-19 15:19:38
【问题描述】：

我在 Angular 应用程序中配置语言环境更改时遇到问题。我正在使用Angular Moment 和 Moment.js

首先，我在 angular.module.config 中将语言环境设置为英语，并根据需要立即设置相对时间对象：

            moment.locale('en', {
                relativeTime: {
                    future: "In %s",
                    past: "%s ago",
                    s: "<1 minute",
                    m: "1 minute",
                    mm: "%d minutes",
                    h: "1 hour",
                    hh: "%d hours",
                    d: "24 hours",
                    dd: "%d days",
                    M: "1 month",
                    MM: "%d months",
                    y: "1 year",
                    yy: "%d years"
                }
            });

这按预期工作，

现在我也有一个平等的对象，但对于德语。我不知道把它放在哪里，因为如果我把它放在配置中，它会覆盖英文配置。

然后我的控制器中有一个带有 EN 和 DE 的标题菜单视图中的选择下拉菜单（我已经将其转换为小写以进行翻译），我似乎无法关联 amMoment.changeLocale('de'); 来更改时刻一部分是德语，我似乎也无法直接用 moment 更新它。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript angularjs momentjs angular-moment

【解决方案1】：

您可以连续为多个语言环境自定义relativeTime，而无需覆盖之前的配置。

您可以使用ng-change 将下拉更改绑定到为所选语言环境调用amMoment.changeLocale 的函数。

请注意，您必须导入 moment-with-locales 或所有必需的语言环境文件才能使用非默认语言环境的时刻。

如果我明白你想要完成什么，这里有一个工作示例：

angular.module('MyApp',['angularMoment'])
.run(function(){
  moment.updateLocale('en', {
    relativeTime: {
      future: "In %s",
      past: "%s ago",
      s: "<1 minute",
      m: "1 minute",
      mm: "%d minutes",
      h: "1 hour",
      hh: "%d hours",
      d: "24 hours",
      dd: "%d days",
      M: "1 month",
      MM: "%d months",
      y: "1 year",
      yy: "%d years"
    }
  });
  moment.updateLocale('de', {
    relativeTime: {
      future : 'in %s',
      past : 'vor %s',
      s : '<ein Minute',
      m : 'ein Minute',
      mm : '%d Minuten'
    }
  });
})
.controller('AppCtrl', function($scope, moment, amMoment) {
  $scope.last_update = moment().valueOf();
  $scope.lang = 'en';
  
  $scope.changeLang = function(){
    amMoment.changeLocale($scope.lang);
  };
  $scope.changeLang();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  {{last_update|amDateFormat:'dddd, MMMM Do YYYY, HH:mm:ss a'}}
  <br/>
  <span am-time-ago="last_update"></span>
  <br/>
  
  <select name="singleSelect" ng-model="lang" ng-change="changeLang()">
    <option value="en">EN</option>
    <option value="de">DE</option>
  </select>
  
  {{lang}}
  
</div>

【讨论】：