Angular6

Question

我想在前端使用 ngx-translate 在应用加载时动态加载翻译。

我的后端 returns JSON 格式的响应，例如：

{
   "something: "something"
}

我想在我的 TranslateLoader 上使用该输出而不是本地 en.json 文件。

有什么办法可以实现吗？

TL;DL：我想调用“http://localhost:xxxx/api/translation/EN”来获取翻译的 JSON 响应并将其加载到 TranslateHttpLoader

Answer 1

我们可以使用带有自定义加载器的 TranslateLoader 提供程序来实现 Class

In Module :

export class CustomLoader implements TranslateLoader {

  constructor(private http: Http) {}

  public getTranslation(lang: String): Observable<any> {
    return this.http.get(URL).map(
      (res: any) => {
        return res;
      }
    );

  }
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useClass: CustomLoader,
      // useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ]
})

在组件中：

 constructor(private _translate: TranslateService){}

 const transText = this._translate.instant('something');

Answer 2

您可以创建工厂：

export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "http://localhost:xxxx/api/translation/", "");
}

并在您的@NgModule 导入中使用它：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: httpLoaderFactory,
    deps: [HttpClient]
  }
}),

Angular6 - 使用 API 调用后端使用 ngx-translate 加载翻译

Angular6 - load translations using API call to backend using ngx-translate

frontend

typescript

ngx-translate

angular