Angular6 - загрузка переводов с помощью API-вызова в бэкэнд с помощью ngx-translate

Question

Я хочу использовать ngx-translate во внешнем интерфейсе для динамической загрузки переводов при загрузке приложения.

Мой бэкэнд возвращает ответ в формате JSON, например:

{
   "something: "something"
}

Я хочу использовать этот вывод в моем TranslateLoader вместо локального 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 с классом Custom Loader

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