6

我正在尝试使用服务 URL 从内容管理系统获取翻译文本。当我使用 JSON 文件时，它运行良好，但如何使用服务 URL 来获取翻译数据？

这是不起作用的代码：

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

3 回答 3

16

昨天我在如何使用 ngx-translate 的 API 调用中使用 JSON 响应时遇到了同样的问题，我已经确定了解决方案。我知道在这里更新很晚，但我相信有人会从中受益。

如果您不打算使用 .json 文件，Ngx-translate 提供使用服务。为此，在您的 *.module.ts 文件中，使用“useClass”而不是“useFactory”，如下所示。

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

在您的翻译服务中，只需调用类似这样的 API url。

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

UI 显示两个按钮（英语和威尔士语），单击时，将根据语言参数相应地调用服务 API url。

于 2018-06-13T05:30:37.807 回答
0

你的方法是绝对正确的。但这会产生另一个问题。我们不能在 HttpLoaderFactory 中保持语言获取 URL 的静态。有时它可能是动态的。而 Viswa 提供的解决方案是针对动态 URL 的。使用服务，我们可以提供动态 URL 以从数据库中获取翻译的语言。

于 2019-08-26T09:03:48.483 回答
0

在尝试从“assets/i18n/english.json”等移动到 MySQL 数据库以从表中动态获取翻译后的值时，我遇到了同样的问题。我想这样做，以便管理员可以自己更改它们。

因此，我尝试了 Viswa 给出的答案并且它有效，但我找到了一种更简单的方法来执行此 HttpLoaderFactory。只需将以下内容添加到您的 app.module.ts。将 URL 替换为您的 API。我的就像' http://localhost:8080/translation/:language '

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

另一件事浪费了一些时间，因为我发送了一个对象数组，[{name: 'Name'}]而不是只发送一个对象，比如{name: 'Name'}. 一旦它被修复，它就像一个魅力！

于 2018-12-28T12:52:27.447 回答