如何在Angular中使用ng2-translate翻译来自数据库的数据？

可以实现，ng2-translate（现更名为@ngx-translate/core）支持自定义翻译加载器，你只需要替换默认读取JSON文件的加载器，改为从后端接口拉取数据库存储的翻译数据即可。

实现步骤 #

1. 自定义翻译加载器 #

继承TranslateLoader接口，实现从后端接口拉取翻译数据的逻辑，示例代码如下：

import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export class DatabaseTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  // lang为当前要加载的语言标识，比如en、es、zh-CN
  getTranslation(lang: string): Observable<any> {
    // 调用你的后端接口，返回对应语言的翻译键值对
    return this.http.get(`/your-api/translation/get?lang=${lang}`);
  }
}

2. 替换模块中的默认加载器 #

在根模块（一般是AppModule）的TranslateModule配置中，把默认加载器替换为你自定义的加载器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { DatabaseTranslateLoader } from './database-translate.loader';
import { AppComponent } from './app.component';

export function loaderFactory(http: HttpClient) {
  return new DatabaseTranslateLoader(http);
}

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

3. 后端接口返回要求 #

后端接口只需要返回和原JSON文件结构完全一致的键值对即可，比如中文语言对应的返回示例：

{
  "SPANISH": "西班牙语",
  "HOME_TITLE": "首页",
  "SUBMIT_BTN": "提交"
}

现有代码说明 #

你写的调用代码完全不需要修改，等翻译数据加载完成后就可以正常拿到翻译结果：

this.translate.get("SPANISH") .subscribe((data: string) => { this.value= data; });

注意事项 #

• 切换语言时ngx-translate会自动调用自定义加载器拉取对应语言的翻译数据，无需额外处理
• 如果翻译数据量较大，可在自定义加载器中添加缓存逻辑，避免重复请求
• 要保证你调用translate.get时传入的键名和接口返回的键名完全一致，否则会直接返回键名本身作为结果

内容的提问来源于stack exchange，提问作者Susmitha Elangovan