3

我正在使用 Angular 4，我正在尝试在我的应用程序中实现 i18n 的技术，问题是：我不知道我应该在哪里写方向 LTR/RTL 在翻译 messages.ar.xlf 的文件中，甚至当我使用i18n-dir dir="ltr"在原始 html 文件中的每个标签中提到它时，我没有得到由 cmd ng xi18n提取的文件 messages.xlf 中的方向，所以我无法改变方向页面：/

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

消息.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>

4

1 回答 1

7

哎呀：我终于找到了答案，这很容易；） app.component.htmldir中有一个 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 事件，我们检查默认语言是否为阿拉伯语，然后将属性设置为“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的答案

于 2019-02-28T14:10:05.347 回答