Question

我正在使用角度4，并且尝试将i18n技术应用到我的应用中，问题是：我不知道将LTR / RTL方向写在翻译message.ar.xlf文件中的哪个位置，即使我在使用 i18n-dir dir =“ ltr” 的原始html文件中的每个标记中都提到了它，我也无法从cmd ng提取的message.xlf文件中获得方向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

糟糕：我终于找到了答案，这很容易;） app.component.html dir中有一个html属性，该属性允许值“ rtl”或“ ltr”并相应地对齐其内容。

app.component.html

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

然后通过监听app.component.ts中的TranslateService中的onLangChange事件，并检查其中的默认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';
      }
    });
  }

  

}

这对我来说很有效；

我在Dayana Jabif上的this issue找到了答案

i18n多向RTL角

1 个答案: