用角度ngx-translate翻译json数组

Question

我有一个很长的文字要在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 }}

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

Answer 1

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

在您的en.JSON中：

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

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

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实现，但是您可以看到还有多少潜力可以使用。您可以定义点击事件，动画，颜色，所选项目等。

Answer 2

更清洁的解决方案，其中：

• 避免创建未处理的订阅，
• 可在不同组件之间重复使用

用于创建自定义管道：

import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';

@Pipe({
  name: 'translateList',
})
export class TranslateListPipe extends TranslatePipe implements PipeTransform {
  transform(key: any, length: number): any[] {
    return [...Array(length).keys()].map((i) => super.transform(`${key}.${i}`));
  }
}

并借助NgFor在任何模板中像这样使用它：

<div *ngFor="let item of 'TRANSLATION_KEY' | translateList:2">{{ item }}</div>

TRANSLATION_KEY是键，它包含2个字符串的数组：

"TRANSLATION_KEY": ["hello", "world"]

此自定义管道扩展了ngx-translate自己的TranslatePipe并在后台使用super.transform(...)调用，因此所有翻译繁重的工作仍由ngx-translate处理。