ngx-translate：从ionic3的firebase中加载i18n json

Question

在Ionic3应用中，我可以如何加载JSON的ngx-translate语言？当前在github上给出的方法提到了为资产文件夹中的每种语言保留JSON文件。这种方法的问题是，每次我必须添加新的语言支持时，我必须发布新版本的应用程序。有没有一种方法可以从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

const TranslateFirebaseLoader = (function() { 
 
    function TranslateFirebaseLoader(db, path) { 
 
    this.db = db; 
 
    this.path = path; 
 
    } 
 

 
    /** 
 
    * Gets the translations from the server 
 
    * @param langCode 
 
    * @returns {any} 
 
    */ 
 
    TranslateFirebaseLoader.prototype.getTranslation = function(langCode) { 
 
    return this.db.object(`${this.path}/${langCode}`); 
 
    }; 
 

 
    return TranslateFirebaseLoader; 
 
}()); 
 

 
export { TranslateFirebaseLoader };

显然，使其工作改变你使用的火力地堡的路径（没有它的语言代码）。例如，在这种情况下，如果语言代码“en”处于活动状态，应用程序将尝试从/my/firebase/path/en中获取数据。