Перевести json-массивы с угловым ngx-translate

Question

У меня есть длинный текст для перевода в приложении Ionic 4.Я использую угловой ngx-translate (@ ngx-translate v11.0.1).

Чтобы улучшить читабельность, я бы хотел, чтобы перевод был в нескольких строках вместо одной.

Я изменил свойi18n json, из этого (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",

Для этого:

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

Затем в вашем компоненте,создайте два свойства класса массива типа следующим образом:

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,но вы видите, какой потенциал вам остается использовать.Вы можете определить события клика, анимацию, цвета, выбранные элементы и т. д.