ng2-translate使用localstorage

Question

我需要使用localstorage在Angular2應用程序中使用ng2-translate存儲所選語言。

我發現這個類，這是應該選擇的語言存儲在localStorage的：

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，翻譯模塊中我進口：

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

你知道什麼是錯的代碼？

Answer 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

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

調用 getTranslation前

它爲我工作，讓我知道如果你有任何問題。