如何在ngx-translate中將TranslateHttpLoader與服務URL一起使用

Question

我正在嘗試從具有服務URL的內容管理系統中獲取翻譯的文本。 當我使用JSON文件時，它運作良好，但是如何使用服務URL來獲取轉換后的數據？

這是無效的代碼：

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, 'http://test.test.com/test/test/Translations/{lang}/{SiteId}');
}    

Answer 1

昨天，我在使用ngx-translate如何利用API調用的JSON響應時遇到了同樣的問題，並且已經找到了解決方案。 我知道在這里更新很晚，但是我相信會有人從中受益。

如果您不打算使用.json文件，則Ngx-translate可以使用Service。 為此，在您的* .module.ts文件中，使用“ useClass”代替“ useFactory”，如下所示。

 @NgModule({
      imports: [SharedModule, SharedComponentsModule, routing,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: TranslationService,
            //useFactory : HttpLoaderFactory,
            deps: [HttpClient]
          }

在您的翻譯服務中，只需調用API網址即可。

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

@Injectable()
export class TranslationService implements TranslateLoader {

    constructor(private http: HttpClient) { }

    getTranslation(lang: string): Observable<any> {
    return this.http.get(`http://<someurlreferences>?language=${lang}`)
    .map((response: JSON) => {
    return response;
    });
    }   
}

切記：API響應應為JSON格式。 否則，ngx-translate不會翻譯。

假設您的JSON響應采用以下格式

{
    "Data": {
        "First": [{
            "key": "FirstKey",
            "value": "FirstValue"
        }]
    }
}

然后，在您的* .component.ts文件中

import { Component, OnInit } from '@angular/core'
import { TranslateService } from '@ngx-translate/core';

@Component({
  template: `<button (click)="switchLanguage('en')" >English</button>
            <button (click)="switchLanguage('cy')" >Welsh</button>
             <h1>{{'Data.First.0.value' | translate }} <!--FirstValue--> 
                    </h1>`

export class SomeComponent implements OnInit {
constructor(private translate: TranslateService) {
      translate.addLangs(['en', 'cy']);
      translate.setDefaultLang('en');

      const browserLang = translate.getBrowserLang();
      translate.use(browserLang.match(/en|cy/) ? browserLang : 'en');
     }
    switchLanguage(language: string) {
    this.translate.use(language);
  }
}

用戶界面顯示兩個按鈕（英語和威爾士語），單擊后，將根據語言參數相應地調用服務API網址。

Answer 2

我試圖從'assets / i18n / english.json'等移動到MySQL數據庫以從表中動態獲取轉換后的值時遇到了相同的問題。 我想這樣做，以便管理員可以自己更改它們。

因此，我嘗試了Viswa給出的答案，它可以工作，但是我找到了一種執行HttpLoaderFactory的簡單方法。 只需將以下內容添加到您的app.module.ts中。 用您的API替換URL。 我的感覺就像是' http：// localhost：8080 / translation /：language '

export function HttpLoaderFactory(http: HttpClient) {  
  return new TranslateHttpLoader(http, "http://localhost:8080/translation/", "");
}

另一件事浪費了一些時間，因為我發送的是[{name: 'Name'}]類的對象數組，而不是僅僅發送{name: 'Name'}類的對象。 一旦修復，它就像一個魅力！

Answer 3

您的方法是絕對正確的。 但這帶來了另一個問題。 我們無法在HttpLoaderFactory中將語言獲取URL保持為靜態。 有時可能是動態的。 Viswa提供的解決方案是針對動態URL的。 使用服務，我們可以提供動態URL，以從數據庫中獲取翻譯的語言。