时间戳

首页 > 解决方案 > 使用角度 ngx-translate 翻译 json 数组

json - 使用角度 ngx-translate 翻译 json 数组

问题描述

我有一段长文本要在 Ionic 4 应用程序中翻译。我正在使用角度 ngx-translate (@ngx-translate v11.0.1)。

为了提高可读性，我希望翻译成多行而不是一行。

我已经从这个（en-US.json）更改了我的 i18n json：

  "common-questions-content" : "<b>Question 1?</b> Answer 1 <br> <b>Question 2?</b> Answer 2 <b>Question 3?</b> Answer 3",

对此：

  "common-questions-content" : [
    "<b>Question 1?</b> Answer 1 <br>",
    "<b>Question 2?</b> Answer 2 <br>",
    "<b>Question 3?</b> Answer 3"
  ],

没想到这行得通！但是，它将逗号放在数组的每个值之间：

用逗号分隔的字符串

我在 app.component.ts 中加载翻译服务：

import {TranslateService} from '@ngx-translate/core';
...
private translateService: TranslateService,
...    
this.translateService.use('en-US');

最后我在我的html页面中使用它：

{{ 'common_questions' | translate }}

是否可以更改此行为并仅显示所有不带逗号的文本？

标签： jsonangularionic-frameworkngx-translate

解决方案

我建议您在每个语句中输入一个输入，并且在翻译中没有 html 标记，例如：

在您的 en.JSON 中：

"QUESTION_1":"blabla",
"QUESTION_2":"blabla",
"QUESTION_3":"blabla",
"ANSWER_1":"blabla",
"ANSWER_2":"blabla",
"ANSWER_3":"blabla",

然后在您的组件中，创建两个数组类型的类属性，如下所示：

public questions : string[];
pulbic answers : string[];
constructor (private translate: TranslateService) {
  translate.get(["QUESTION_1", "QUESTION_2", "QUESTION_3"]).subscribe(
      values => {
        this.questions = Object.keys(values).map(key => values[key]);
      }
   );
   translate.get(["ANSWER_1", "ANSWER_2", "ANSWER_3"]).subscribe(
      values => {
        this.answers = Object.keys(values).map(key => values[key]);
      }
   );
}

然后在您的 html 显示中，自定义、添加点击事件或您需要的任何内容：

<ion-grid>
   <ion-row>
      <ion-col col-6>
         <ion-grid>
           <ion-row *ngFor="let q of questions"><b>{{q}}</b></ion-row>
         </ion-grid>
      </ion-col>
      <ion-col col-6> 
         <ion-grid>
           <ion-row *ngFor="let a of answers">{{a}}</ion-row>
         </ion-grid>
      </ion-col>
   </ion-row>
</ion-grid>

这是基本的 html 实现，但您会看到还有多少潜力可供您使用。您可以定义点击事件、动画、颜色、选定项目等。

推荐阅读