Angular 4 i18n多语言方向(LTR/RTL)配置问题求助

嘿，我来帮你搞定这个方向切换的问题！首先得澄清一个关键点：i18n-dir 并不是用来被 ng xi18n 提取到翻译文件里的标记，它是Angular专门用来根据当前语言自动控制元素文字方向的指令。你遇到的提取不到方向信息的情况其实是正常的，因为方向不属于文本翻译范畴，而是由语言的书写规则决定的。下面是具体的解决步骤：

1. 正确使用 i18n-dir 指令 #

先修改你的模板代码，不需要手动指定 dir="ltr"，i18n-dir 会自动根据当前语言的locale（比如阿拉伯语是RTL，英语是LTR）来设置方向：

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

把 i18n-dir 加在父元素上（比如最外层的.row），就能让整个区块的方向跟随语言自动切换，不需要给每个标签都加。

2. 全局配置Locale来触发方向切换 #

要让 i18n-dir 生效，你需要在AppModule中配置当前语言的locale，并注册对应的语言数据：

// app.module.ts
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
// 导入阿拉伯语locale数据
import localeAr from '@angular/common/locales/ar';
// 导入英语locale数据（如果需要）
import localeEn from '@angular/common/locales/en';

// 注册语言数据
registerLocaleData(localeAr);
registerLocaleData(localeEn);

@NgModule({
  providers: [
    // 默认设置为英语，你可以根据需求动态修改这个值
    { provide: LOCALE_ID, useValue: 'en' }
  ]
})
export class AppModule { }

当你把 LOCALE_ID 的值改成 'ar' 时，所有加了 i18n-dir 的元素都会自动切换为RTL方向。

3. 动态切换语言与方向 #

如果需要让用户手动切换语言（比如从英语切到阿拉伯语），可以通过动态修改 LOCALE_ID 或者直接绑定 dir 属性来实现：

方式一：绑定dir属性（更直观） #

在根组件（比如AppComponent）中管理当前语言，然后绑定到根元素的dir属性：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [dir]="currentLang === 'ar' ? 'rtl' : 'ltr'">
      <!-- 你的所有页面内容都放在这里 -->
      <app-new-post></app-new-post>
      <!-- 语言切换按钮 -->
      <button (click)="switchLanguage('en')">English</button>
      <button (click)="switchLanguage('ar')">العربية</button>
    </div>
  `
})
export class AppComponent {
  currentLang = 'en';

  switchLanguage(lang: string) {
    this.currentLang = lang;
    // 如果需要同步更新LOCALE_ID，你可以使用依赖注入的方式动态修改，这里就不展开了
  }
}

这种方式不需要依赖 i18n-dir，直接通过逻辑判断来切换方向，适合需要灵活控制的场景。

为什么你的ng xi18n没提取方向信息？ #

ng xi18n 工具的作用是提取需要翻译的文本内容（也就是带 i18n 标记的文本），而 i18n-dir 是用来控制元素行为的指令，不属于翻译文本，所以不会被提取到 messages.xlf 里。你完全不需要在 messages.ar.xlf 里设置方向，只需要保证语言locale配置正确，方向就会自动切换。

内容的提问来源于stack exchange，提问作者Mohamed Hassona