使用 angular ngx-translate 翻译 json 数组

Question

I have a long text to be translated in an Ionic 4 app. I am using angular ngx-translate (@ngx-translate v11.0.1).

To improve readability I would like to have the translation in multiples lines instead of one.

I have changed my i18n json, from this (en-US.json):

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

To this:

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

Unexpectedly this works! But, it puts commas between every value of the array:

I load the translation service in my app.component.ts:

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

Finally I use it in my html page like that:

{{ 'common_questions' | translate }}

Is it possible to change this behavior and just show all the text without commas?

Answer 1

I would recommend you to have one single input per statement and without html tags int the translations such as :

in your en.JSON :

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

Then in your component, create two class properties of type array like so:

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]);
      }
   );
}

Then in your html display, customize, add click events or whatever you need :

<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>

This is basic html implementation, but you see how much potential is left for you to use. you can define click events, animations, colors, selected items and so on..

Answer 2

A more cleaner solution which:

• avoids creating unhanded subscriptions,
• is reusable across different components

is to create a custom pipe:

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}`));
  }
}

And use it like so in any template with help of NgFor :

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

Where TRANSLATION_KEY is key that hols an array of 2 strings:

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

This custom pipe extends ngx-translate 's own TranslatePipe and uses super.transform(...) call under the hood, so all translation heavy lifting is still handled by ngx-translate .