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

Question

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

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

{
"something: "something"
}

我想在我的翻译加载器上使用该输出，而不是本地en.json文件。

有什么办法可以做到这一点吗？

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

Answer 1

您可以创建工厂：

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

并在@NgModule导入中使用它：

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

Answer 2

我们可以将 TranslateLoader 提供程序与自定义加载器类一起使用

来实现

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');