Как я могу узнать, является ли элемент пустым в моем файле перевода в моем html-компоненте? - PullRequest
Новая
       30

Как я могу узнать, является ли элемент пустым в моем файле перевода в моем html-компоненте?

1 голос
/ 04 июля 2019

Я использую ngx-translate, я создаю файлы: en.json и fr.json для перевода на французский и английский.

В en.json : 

{
    "home": {
        "test": ""
    }
}

In fr.json : 

{
    "home": {
        "test": "Testons"
    }
}

Язык браузера пользователя - английский (en), но по умолчанию вебязык сайта французский.

Я хочу что-то сделать, чтобы позволить мне использовать французский, если путь перевода пуст.Я знаю, что перевод мог бы работать, если бы у меня не было пути home.test , но я не хочу этого делать.

Можно ли разрешить мне использовать французский, даже если путь перевода пуст?

1 Ответ

1 голос
/ 04 июля 2019

Вы можете реализовать TranslateLoader, чтобы перейти к тому, что вы хотите.

Например, этот способ удаляет пустые строки из файлов (конечно, вы можете адаптировать его в зависимости от ваших потребностей): my-translate-loader.ts 

export class MyTranslateLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    private prefix: string = '/assets/i18n/',
    private suffix: string = '.json') {
  }

  public getTranslation(lang: string): any {
    return this.http.get(`${this.prefix}${lang}${this.suffix}`)
      .pipe(map(result => this.process(result)));
  }

  private process(object: object) {
    return Object.keys(object)
      .filter(key => object.hasOwnProperty(key) && object[key] !== '')
      .reduce((result, key) => (result[key] = typeof object[key] === 'object' ? this.process(object[key]) : object[key], result), {});
  }
}

А затем в файле app.module.ts измените следующее: 

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new MyTranslateLoader(http);
             ^^^^^^^^^^^^^^^^^
}

Предполагая, что вы уже настроилиМодуль импортирует так: 

imports: [
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    }
  })
  ...
]
...