2017-03-25 5 views
0

ng2-translateを使用してAngular2アプリケーションに選択した言語を格納するには、localstorageを使用する必要があります。ng2-translate localstorageを使用する

私はのlocalStorageで選択した言語を保存することになっている、このクラスが見つかりました:それは動作しなかったので、私はこれに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(); 
       }); 
     }); 
    } 
} 

を:

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

エラーは表示されませんが、動作しません。ページをリロードすると、defaut言語が選択されます。

はまた、私は私の輸入のNG2-変換モジュールを設定する必要がありました:

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

あなたはコードと間違っているものを知っていますか?

答えて

1

遅くとも回答がありましたが、ローカルストレージを使用して実装する方法を見つけるために質問に出ましたが、誰もあなたを助けなかったことがわかりました。どういうわけか私はそれを整理する方法を見つけることができます。
まずサービスオブジェクトを翻訳し、その中に言語を設定作成:

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

は、あなたが使用したい言語が追加の言語の上記のセットで利用可能であるべきであることを確認してください。

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を呼び出す以下のようにのlocalStorageに最初のデータを保存するために必要なのlocalStorageからデータをフェッチする 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

それは私のために働いた、あなたが何か問題がある場合は教えてください。

関連する問題