如何在 Ionic 3 上使用 Angular 管道将日期翻译成西班牙语

Question

我正在从 SQL Server 2014 获取到我的 Ionic 项目的日期。我正在显示一个日期，并使用 Angular 管道进行格式化，但它以英语显示日期。我需要用西班牙语显示日期。我正在尝试使用 I18n，但它不起作用。我确信我以错误的方式实现它。

HTML

    <script src="angular.js"></script>
    <script src="i18n/angular-locale_es-mx.js"></script>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="../../assets/js/angular-locale_es-mx.js"></script>
    <script>
        angular.mode('API', []).
        controller('theController', ['$scope', function($scope){
            $scope.date = new Date();
        }])
    </script>
</div>
<div class="row">
    <div class="col-md-4">
        <ion-icon class="ct-icon date-icon-info" name="appname-clock"></ion-icon>
    </div>
    <div class="col-md-8">
        <span class="dates-text" ng-non-bindable>Últ. actualización:</span>
        <span>{{travel.LastUpdateDate  | date: 'dd MMM, yyyy'}}</span> 
    </div>
</div>

Answer 1

您可以使用开源的https://momentjs.com将日期转换为西班牙语。

您可以使用 momentjs 创建自定义日期管道

示例：

moment().format('MMMM Do YYYY, h:mm:ss a'); // agosto 29º 2018, 8:51:39 am
moment().format('dddd');                    // miércoles
moment().format("MMM Do YY");               // ago. 29º 18
moment().format('YYYY [escaped] YYYY');     // 2018 escaped 2018
moment().format(); 

moment.locale('es');

加强西班牙语

Answer 2

第 1 步 - 将“区域设置”标签添加到管道

<span>{{travel.LastUpdateDate | date: 'dd MMM, yyyy':locale}}</span> 

第 2 步 - 将 Angular 的国际化添加到您的应用程序中 - https://angular.io/guide/i18n-overview

第 3 步 - 在项目下的 angular.json 文件中，添加以下代码：

 "projects": {
    "YourProjectName": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "es": {
            "translation": "src/locale/messages.es.xlf"
          }
        }
      },
      ...

实际上需要添加更多代码到该文件中才能使您的国际化工作正常进行，但这是您需要关注的日期管道本地化的主要代码。

您现在有两个选项来翻译您的日期管道，1）您可以将“sourceLocale”更改为“es”（西班牙语）并重新启动您的应用程序。或者 2) 您可以按照 Angular 国际化教程视频（我在上面发送的链接）中的步骤操作，并将“message.es.xlf”文件添加到您的应用程序中以表示您的西班牙语翻译。然后，您可以像这样更新 angular.json 文件中的服务器配置：

"es": {
  "browserTarget": "NLTWeb:build:development,es"
},

以及 angular.json 文件中的构建配置：

"configurations": {
  "es": {
    "localize": ["es"]
  },

最后，您可以使用以下命令启动应用程序：“npm run start -- --configuration es”