ng2-translate 使用本地存储
ng2-translate use localstorage
我需要使用 localstorage 将所选语言存储在带有 ng2-translate 的 Angular2 应用程序中。
我发现这个 class 应该将所选语言存储在本地存储中:
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
})
你知道代码有什么问题吗?
一个迟到的答案,但我来到你的问题是为了了解如何使用本地存储来实现它,但发现没有人帮助你。不知何故,我能够找到解决方法。
首先创建翻译服务对象并将语言设置到其中:
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);
}
它对我有用,如果您有任何问题,请告诉我。
我需要使用 localstorage 将所选语言存储在带有 ng2-translate 的 Angular2 应用程序中。
我发现这个 class 应该将所选语言存储在本地存储中:
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
})
你知道代码有什么问题吗?
一个迟到的答案,但我来到你的问题是为了了解如何使用本地存储来实现它,但发现没有人帮助你。不知何故,我能够找到解决方法。
首先创建翻译服务对象并将语言设置到其中:
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);
}
它对我有用,如果您有任何问题,请告诉我。