ionic3 - 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

好的，我设法使它像这样工作：

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

显然，要使其正常工作，请更改您在 Firebase 上使用的路径（其中不包含语言代码）。例如，在这种情况下，/my/firebase/path/en如果语言代码“en”处于活动状态，应用程序将尝试从中获取数据。