Angular 如何使用ngx translate本地化来自后端的数据

我正在构建一个有角度的应用程序。它工作得很好。现在我开始有来自后端（firebase）的数据，我将对其进行翻译

显示模型中的本地化数据的正确方法是什么？我还没有确定数据格式，所以要么是：

{
  'title_fr': 'mon titre',
  'title_en': 'my title',
  'title_de': 'mein Titel',
  'description_fr' : '....'
  //...
}

{
   title: {'fr':'mon titre', 'en': 'my title', 'de': 'mein Titel'}
   description: { 'fr': 'ma description', /*...*/}
}

或者类似于：

{
  'title_fr': 'mon titre',
  'title_en': 'my title',
  'title_de': 'mein Titel',
  'description_fr' : '....'
  //...
}

{
   title: {'fr':'mon titre', 'en': 'my title', 'de': 'mein Titel'}
   description: { 'fr': 'ma description', /*...*/}
}

我不知道如何显示它们：

我将有大量的

ngFor

迭代这些项目的可观察性，如果我可以避免映射每个数据，那就太好了

当语言发生变化时，我还需要显示正确的译文

---

您能给我推荐什么？

如果您能够定义可以从后端获取的数据，那么您可能可以按照以下方式创建数据结构

{
    "dataLocalization": [{
                            "locale": "fr",
                            "title": "mon titre",
                            "description":"ma description"
                        },
                        {
                            "locale": "en",
                            "title": "my title",
                            "description":"my description"
                        }]
}

然后，您可以通过数组dataLocalization中的findIndex方法找到您的区域设置，并使用其标题和描述值。

库允许使用http加载翻译

下面是我在开发的应用程序中如何使用

ngx-translate

和

http-loader

的一个例子

我已完成以下代码的工作（可用）：

定义i18n字符串的数据结构

在该示例中，对于每种语言，都有一个url，可在其中以以下格式检索翻译数据（

json

）：

{
  welcome: "Welcome",
  subscription_msg: "Subscribe now"
}

为每种支持的语言创建一个Web服务

考虑一个支持3种语言的应用程序：

en

、

pt

和

fr

我通常每种语言都有一个url。每个url返回一个json，其中包含

键

-

值

对，其中键是我在前端使用的标签，值是我希望用该语言向用户显示的消息

在该示例中，我创建了3个模拟URL，每个语言的翻译如下：

英文-模拟网址：

葡萄牙语-模拟网址：

法语-模拟网址：

要在前端输出

subscription\u msg

，我使用

ngx translate

语法如下：

{{ 'subscription_msg' | translate}}

安装@ngx translate/http加载程序

假设已经安装了

ngx translate

，这是用于安装

http加载程序的命令：

npm install @ngx-translate/http-loader --save

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

创建自己的TranslationLoader

我们需要实现
TranslationLoader
接口。它只有一个方法（
getLanguage（）
）负责加载当前语言的i18n消息映射

下面是名为
TranslationHttpLoader
的简单实现。更改语言时将调用该命令：

export class TranslationHttpLoader implements TranslateLoader {
  constructor(private httpClient: HttpClient) {}

  public getTranslation(lang: string): Observable<Object> {
    if (lang == null) {
      lang == "en";
    }

    let urls = {
      en: "https://run.mocky.io/v3/33f736b0-e73a-499e-8a50-01e66041d634",
      pt: "https://run.mocky.io/v3/db1e37da-342e-4918-8ce2-bd30aa12fe79",
      fr: "https://run.mocky.io/v3/6960c960-ea66-42a0-87f1-f34568ecb740"
    };

    let observer = new Observable(observer => {
      this.httpClient.get(urls[lang]).subscribe(
        data => {
          observer.next(data);
          observer.complete();
        }
      );
    });
    return observer;
  }
}

并将其与提供的
TranslateLoader
关联：

npm install @ngx-translate/http-loader --save

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

测试-更改语言并显示本地化消息

检验


我们创建了一个简单的组件，它有一个
，语言作为选项，还有一个
（change）
事件处理程序
为了输出本地化字符串，我们使用
ngx-translate
语法
{{{ujson_文件中的key}}

app.component.html

输出预览


下一步

可以在此处提供的代码中进行一些增强，例如：


使用
translateService.getBrowserLang（）
将用户当前语言存储在本地存储或其他持久存储中
调整
TranslationHttpLoader
，使其可以脱机使用每种语言的默认标记（在移动应用程序中特别有用）

在stackblitz中可以看到上面描述的代码在这里工作：
通过这种方式检查，如果您还有任何疑问，请告诉我，如果您发现这个有用的，请将其标记为正确，并请upvoteYes，但是如果用户切换语言，您将从firebase接收到的数据存储在正确的位置，这将如何改变？每当用户更改您可能正在使用translate.use的change订阅上的语言时，您需要再次检查此数组并根据此数组更改值，但处理来自ngx translate+的更改的最佳方法是什么？非常感谢您的完整答案，但我不确定这是否适用于我。我正在从firebase获取数据，因此我需要使用ngfire软件包来访问我的数据（它允许自动管理后端和前端之间的同步，允许脱机工作，然后同步，…），因此我无法使用HttpLoader：（.另外，我不确定关键是什么？关键是在我的后端有本地化的业务数据，就像tripadvisor有本地化的描述一样。
<div>
    <label>Language</label>
    <select (change)="changeLanguage($event)">
    <option value="en">English</option>
    <option value="pt">Português</option>
    <option value="fr">Français</option>
  </select>

    <p>
        {{'welcome' | translate}}.
    </p>
    <p>
        {{'subscription_msg' | translate}}
    </p>
</div>

export class AppComponent {
  defaultLang: string = "en";

  constructor(private translateService: TranslateService) {}
  ngOnInit() {
    this.translateService.use(this.defaultLang);
  }
  changeLanguage(event) {
    let lang = (event.target as HTMLInputElement).value;
    this.translateService.use(lang);
  }
}