ng2-translate 使用本地存储答案

【问题标题】：ng2-translate use localstorageng2-translate 使用本地存储
【发布时间】：2017-03-25 12:29:44
【问题描述】：

我需要使用 localstorage 通过 ng2-translate 将所选语言存储在我的 Angular2 应用程序中。

我找到了应该将所选语言存储在本地存储中的此类：

import {TranslateLoader} from "ng2-translate/ng2-translate";
import {Observable} from "rxjs/Observable";
import {Response, Http} from "angular2/http";

export class TranslateLSLoader implements TranslateLoader {
    constructor(private http: Http, private prefix: string = 'i18n', private suffix: string = '.json') {}

    /**
     * Gets the translations from the localStorage and update them with the ones from the server
     * @param lang
     * @returns {any}
     */
    public getTranslation(lang: string): Observable<any> {
        return Observable.create(observer => {
            let translations = localStorage.getItem('ng2-translate-' + lang);
            if(translations) {
                observer.next(JSON.parse(translations));
            }

            this.http.get(`${this.prefix}/${lang}${this.suffix}`)
                .map((res: Response) => res.json())
                .subscribe((res: any) => {
                    observer.next(res);
                    localStorage.setItem('hmx-lang-' + lang, JSON.stringify(res));
                    observer.complete();
                });
        });
    }
}

由于它不起作用，我将我的 angular2 版本修复为：

import {TranslateLoader} from "ng2-translate/ng2-translate";
import {Observable} from "rxjs/Observable";
import {Http, Response} from "@angular/http";
import {Injectable} from "@angular/core";

@Injectable()
export class TranslateLSLoader implements TranslateLoader {
    constructor(private http: Http) {}

    /**
     * Gets the translations from the localStorage and update them with the ones from the server
     * @param lang
     * @returns {any}
     */
    public getTranslation(lang: string): Observable<any> {
        return Observable.create(observer => {
            let translations = localStorage.getItem('ng2-translate-' + lang);
            if(translations) {
                observer.next(JSON.parse(translations));
            }

            this.http.get(`${'i18n'}/${lang}${'.json'}`)
                .map((res: Response) => res.json())
                .subscribe((res: any) => {
                    observer.next(res);
                    localStorage.setItem('hmx-lang-' + lang, JSON.stringify(res));
                    observer.complete();
                });
        });
    }
}

现在我没有收到任何错误，但它不起作用，当我重新加载页面时，它会选择默认语言。

我还必须在我的导入中配置 ng2-translate 模块：

TranslateModule.forRoot({
    provide: TranslateLoader,
    useClass: TranslateLSLoader
})

你知道代码有什么问题吗？

【问题讨论】：

标签： angular typescript ng2-translate

【解决方案1】：

一个迟到的答案，但我来到你的问题，以了解如何使用本地存储来实现它，但发现没有人帮助你。不知何故，我能够找出如何解决它。
首先创建翻译服务对象并在其中设置语言：

this.translate.addLangs(['en','hn','hu']);

确保您要使用的语言在上述添加的语言集中可用。

如下更改TranslateLSLoader

export class TranslateLSLoader implements TranslateLoader {
    constructor(private http: Http) {}

    public getTranslation(lang: string): Observable<any> {
        return Observable.create(observer => {
            let translations = localStorage.getItem(lang);
            if(translations) {
                observer.next(JSON.parse(translations));
            }
        });
    }
}

在调用TranslateLSLoader 从localStorage 获取数据之前，您需要先将数据存储到localStorage 中，如下所示

localStorage.setItem(languageCode, lang_json);

现在从TranslateLSLoader 拨打getTranslation

this.translateLSLoader.getTranslation(languageCode).subscribe(data => this.translationData(data, languageCode), error => console.log(error));   

translationData(data:any, languageCode:any){
            //set current translation
            this.translate.setTranslation(languageCode,data,false);
            this.translate.use(languageCode);
}

它对我有用，如果您有任何问题，请告诉我。

【讨论】：