我如何在Ionic 3上将与Angular pipe的日期翻译为西班牙语

t98cgbkg  于 12个月前  发布在  Ionic
关注(0)|答案(2)|浏览(175)

我正在从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>

字符串

qni6mghb

qni6mghb1#

您可以使用https://momentjs.com,这是开源的日期转换成西班牙语。
你可以用momentjs为date创建一个自定义管道
范例:

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');加强西班牙语

sz81bmfz

sz81bmfz2#

步骤1 -在管道中添加“locale”标签

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

字符串
第二步:
在组件.ts文件中,从angular/core导入“LOCALE_ID”和“Inject”,如下所示:

import {
  Inject,
  LOCALE_ID,
  OnInit,
} from '@angular/core';

constructor(@Inject(LOCALE_ID) public locale: string) {}


第3步-将Angular的国际化添加到您的应用-https://angular.io/guide/i18n-overview
第4步-在你的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

相关问题