i18n многонаправленный RTL угловой

Question

Я использую Angular 4, и я пытаюсь реализовать технику i18n в моем приложении, проблема заключается в следующем: я не знаю, где я должен написать направление LTR/RTL в файле перевода messages.ar.xlf, даже когда я упоминаю это в каждом теге в моем исходном html-файле, используя i18n-dir dir="ltr", я не получаю направление в файле messages.xlf, извлеченном cmd ng xi18n, и поэтому не могу изменить направление страницы: /

New-post.component.html

<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <h2 i18n="@@newPost" i18n-dir dir="ltr">New Post</h2>
      <form [formGroup]="postForm" (ngSubmit)="onSavePost()">
        <div class="form-group">
          <label for="title" i18n="title" i18n-dir dir="ltr">Title</label>
          <input type="text" id="title"
                 class="form-control" formControlName="title">
        </div>
        <div class="form-group">
          <label for="content" i18n="content" i18n-dir dir="ltr">Content</label>
          <textarea id="content"
                    class="form-control" formControlName="content">
          </textarea>
        </div>
        <button class="btn btn-primary" [disabled]="postForm.invalid "
            type="submit" i18n="save"  dir="ltr">Save</button>
      </form>
    </div>
  </div>

messages.xlf

<trans-unit id="newPost" datatype="html">
        <source>New Post</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
      <trans-unit id="fdf7cbdc140d0aab0f0b6c06065a0fd448ed6a2e" datatype="html">
        <source>Title</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">6</context>
        </context-group>
        <note priority="1" from="description">title</note>
      </trans-unit>
      <trans-unit id="4ab4cb601522b9194922554d934c4c30bd93567d" datatype="html">
        <source>Content</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">11</context>
        </context-group>
        <note priority="1" from="description">content</note>
      </trans-unit>
      <trans-unit id="52c9a103b812f258bcddc3d90a6e3f46871d25fe" datatype="html">
        <source>Save</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">17</context>
        </context-group>
        <note priority="1" from="description">save</note>
      </trans-unit>

Answer 1

ooops: я наконец нашел ответ, это очень просто;) В app.component.html есть атрибут html dir это позволяет значения "rtl" или "ltr" и выравнивает его содержимое соответственно.

app.component.html

<app-header></app-header>
<div class="container" dir="{{textDir}}">
    <router-outlet></router-outlet>
</div>

Прослушивая событие onLangChange из TranslateService в app.component.ts и внутри него, мы проверяем, является ли Lang по умолчанию арабским, а затем устанавливаем атрибут "rtl":

app.component.ts

import { Component } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  textDir: string = 'ltr';

  constructor(private translate: TranslateService) {

//this is to determine the text direction depending on the selected language

    this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
    {
      if(event.lang == 'ar')
      {
        this.textDir = 'rtl';
      } 
      else
      {
        this.textDir = 'ltr';
      }
    });
  }

  

}

и это просто сработало для меня;

я нашел ответ Даяны Джабиф по этому вопросу