ng2-перевести использовать локальное хранилище

Мне нужно использовать localstorage для хранения выбранного языка в моем приложении Angular2 с помощью ng2-translate.

Я нашел этот класс, который должен хранить выбранный язык в локальном хранилище:

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

Вы знаете, что не так с кодом?


typescript angular ng2-translate
person Elbbard    schedule 25.03.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Поздний ответ, но я пришел к вашему вопросу, чтобы узнать, как реализовать его с использованием локального хранилища, но обнаружил, что вам никто не помог. Каким-то образом я могу выяснить, как с этим разобраться.
Сначала создайте служебный объект Translate и установите в нем языки:

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

Теперь позвоните getTranslation из TranslateLSLoader

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

Это сработало для меня, дайте мне знать, если у вас есть какие-либо проблемы.

person Amit Bisht    schedule 26.08.2017