ngx-translate：ionic3のfirebaseからi18n jsonをロード

Question

Ionic3アプリでは、ngx-translate用のJSONをロードする方法は何ですか？ githubにある現在のアプローチは、各言語のJSONファイルをassetsフォルダに保存することについて言及しています。このアプローチの問題は、新しい言語サポートを追加するたびに新しいバージョンのアプリをリリースする必要があることです。 FirebaseからJSONをロードする方法はありますか？

Answer 1

Firebaseからフェッチする新しいTranslateLoaderを作成することができました。ここでは、コードは次のとおりです。

import {AngularFireDatabase} from 'angularfire2/database'; 
import {TranslateLoader} from "@ngx-translate/core"; 

export class TranslateFirebaseLoader implements TranslateLoader { 
    constructor(public db : AngularFireDatabase) {} 

    /** 
    * Gets the translations from firebase 
    * @param lang 
    * @returns {any} 
    */ 
    public getTranslation(lang: string): any { 
     return this.db.list('/translations/'+lang) 
      .map(data => { 
       let fields={}; 
       data.forEach(field =>{ 
       fields[field.$key]=field.$value; 
       }); 
       return fields; 
      }); 
    } 
} 

Answer 2

OK私はそれがこのように動作させるために管理：

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
 

 
// Should work with "AngularFireDatabase" too. But I want it to work offline 
 
import { AngularFireOfflineDatabase } from 'angularfire2-offline/database'; 
 

 
import { TranslateFirebaseLoader } from './TranslateFirebaseLoader'; 
 

 
export function createTranslateLoader(db: AngularFireOfflineDatabase) { 
 
    return new TranslateFirebaseLoader(db, '/my/firebase/path'); 
 
} 
 

 
@NgModule({ 
 
    imports: [ 
 
    // ... 
 
    TranslateModule.forRoot({ 
 
     loader: { 
 
     provide: TranslateLoader, 
 
     useFactory: (createTranslateLoader), 
 
     deps: [ AngularFireOfflineDatabase ] 
 
     } 
 
    }), 
 
    // ... 
 
    ], 
 
    // ... 
 
}) 
 
export class AppModule {}

TranslateFirebaseLoader.ts

明らか

、それはあなたが（その中に言語コードなし）Firebaseに使用しているパスを変更動作させるために。 たとえば、この場合、言語コード「en」がアクティブな場合、アプリは/my/firebase/path/enからデータをフェッチしようとします。