ngx-translate: загрузка i18n json из firebase в ionic3

В приложении Ionic3, как я могу загрузить язык JSON для ngx-translate? Текущий подход, указанный в github, упоминает о сохранении файлов JSON для каждого языка в папке ресурсов. Проблема с этим подходом заключается в том, что каждый раз, когда мне нужно добавить поддержку нового языка, мне приходится выпускать новую версию приложения. Есть ли способ загрузить JSON из Firebase?


ionic3 ngx-translate
person raj    schedule 26.06.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Мне удалось создать новый TranslateLoader, который будет извлекаться из Firebase. Вот код:

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;
            });
    }
}
person raj    schedule 07.07.2017
comment
Спасибо. Не могли бы вы предоставить фрагмент того, как вы используете этот код. Я получаю сообщение об ошибке Невозможно прочитать свойство getTranslation неопределенного значения. Большое спасибо - person Maslow; 13.09.2017

arrow_upward
1
arrow_downward

Хорошо, мне удалось заставить это работать так:

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» активен.

person Maslow    schedule 13.09.2017