angular 2 ng2-translate 自定义 TranslateLoader 不适用于 API答案

【问题标题】：angular 2 ng2-translate custom TranslateLoader not working with APIangular 2 ng2-translate 自定义 TranslateLoader 不适用于 API
【发布时间】：2017-03-28 04:26:08
【问题描述】：

ng2-translate 在从 API 获取数据时无法使用自定义 TranslateLoader。下面是我的自定义 TranslateLoader

translateCustomLoader.ts

@Injectable()
export class CustomTranslateLoader implements TranslateLoader  {

    constructor(private http: Http, private apiService: AuthHttp) { console.log("customer loader initialized"); }

    getTranslation(lang: string): Observable<any>{
        var apiAddress = "http://test.com/api/gettranslationsfromDB?culture=" + lang;

        return this.apiService.get(apiAddress).map((res) => res.json());

        //return Observable.of({ "hello": "translatedhello","welcome":"translatedwelcome"});
    }
}

来自 API 的响应是

{ "hello": "translatedhello","welcome":"translatedwelcome"}

为 app.module.ts

中的提供程序添加了 TranslateLoader

providers: [CustomTranslateLoader, { provide: TranslateLoader, useClass: CustomTranslateLoader}]

在我的 HTML 页面中

<h4>{{ 'hello' | translate }}</h4>

我仍然看到hello 被渲染。如果我替换它会正常工作

return this.apiService.get(apiAddress).map((res) => res.json());

与

return Observable.of({ "hello": "translatedhello","welcome":"translatedwelcome"});

所以我很确定配置没有任何问题。我在这里遗漏了什么？

【问题讨论】：

标签： angular ng2-translate

【解决方案1】：

我通过如下更改 getTranslation 使其工作

getTranslation(lang: string): Observable<any> {
    var apiAddress = "http://test.com/api/gettranslationsfromDB?culture=" + lang;
    return Observable.create(observer => {
            this.authService.get(apiAddress)
                .subscribe((res: Response) => {
                    observer.next(JSON.parse(res.json()));
                    observer.complete();               
                });
        });

    }

虽然对我来说没有多大意义。希望这对某人有所帮助。

【讨论】：