Переводы на основе определенных ключей в пользовательских файлах JSON и бизнес-кейсах с помощью ngx-translate (Angular 7)

Question

У меня есть рабочая реализация библиотеки ngx-translate для Angular, основанная на нескольких файлах .json (например, хранящихся в assets / i18n / en.json * 1005).*).

Я хочу добиться следующего:

Всегда есть JSON по умолчанию (например, de.json )и дополнительно всегда определенные JSON-файлы (например, de_specific.json ), которые содержат только конкретные переводы с использованием тех же ключей , что и соответствующий JSON по умолчанию.Если, например, по умолчанию есть перевод de.json с "Home": "Startseite" , то перевод вспецифический de_specific.json определяется как: «Home»: «Startseite-Specific» .Только ключи, которые должны быть специально переведены, переносятся в конкретные файлы JSON.

Затем необходимо дополнительно проверить, какой бизнес-вариант в настоящее время выбран, и существует ли для этого случая конкретный файл JSON, и еслисвойства отличаются от свойств, установленных в файле JSON по умолчанию.Если это так, то этот конкретный файл JSON должен быть взят, в противном случае - файл по умолчанию.

Я должен реализовать свою собственную Angular-Pipe или Директиву для этого, которая расширяет встроенную в трубу ngx-перевести библиотека.Однако я понятия не имею, как и где это сделать.

К сожалению, я еще не написал свою собственную угловую трубу или директиву, и поэтому мне приятно получить подробную помощь.

В этом сервисетекущая (неправильная) логика реализована:

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import 'moment/locale/de';
import { UserAuthService } from 'app/auth/user-auth.service';

@Injectable()
export class ConfigurationService{

  languages = {
    en: 'English',
    de: 'German',
    de_specific: 'German',
    es: 'Spanish',
    ja: 'Japanese',
    pt: 'Portuguese'
  };

  defaultLanguage = 'en';

  constructor(
    private translate: TranslateService,
    private authService: UserAuthService
  ) {}

  getAutoConfiguredLanguage() {
    const browserLang = this.translate.getBrowserLang();
    const businessCase = this.authService.activeBusinessCase;

    console.log('Browser language: ', browserLang);
    console.log('Current business case: ', businessCase);
    if (this.languages.hasOwnProperty(browserLang)) {
      return businessCase === 'XYZCase' ? browserLang.concat('_specific') :
      browserLang;
    } else {
      return this.defaultLanguage;
    }
  }

}

В AppComponent инициализация выполняется в методе initLanguage:

  import { Component, HostListener } from '@angular/core';
  import { UserAuthService } from './auth/user-auth.service';
  import { SettingsService } from './auth/settings.service';
  import { TranslateService } from '@ngx-translate/core';
  import { ConfigurationService } from './config/configuration.service';
  import * as moment from 'moment';
  import { Title } from '@angular/platform-browser';
  import { environment } from '../environments/environment';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {

    constructor(private translate: TranslateService,
                private config: ConfigurationService,
                private settings: SettingsService,
                private authService: UserAuthService,
                private titleService: Title) {
      translate.addLangs(Object.keys(config.languages));
      translate.setDefaultLang(config.defaultLanguage);
      this.initLanguage();
      this.initTabName();
    }

    @HostListener('window:focus')
    onFocus() {
      this.authService.checkAutoLogout();
    }

    initLanguage() {
      console.log("test:-", this.authService.activeBusinessCase);
      const userDefinedLanguage = this.settings.language;
      if (userDefinedLanguage) {
        this.translate.use(userDefinedLanguage);
      } else {
        this.translate.use(this.config.getAutoConfiguredLanguage());
      }

      this.translate.onLangChange.subscribe(langEvent => {
        console.log('set global language ' + langEvent.lang);
        moment.locale(langEvent.lang, this.getCustomMomentLocaleSettings(langEvent.lang));
      });

    }

    getCustomMomentLocaleSettings(lang) {
      if (lang === 'en') {
        return {
          relativeTime: {
            future: 'in %s',
            past: '%s ago',
            s: '1 second',
            ss: '%d seconds',
            m: '1 minute',
            mm: '%d minutes',
            h: '1 hour',
            hh: '%d hours',
            d: '1 day',
            dd: '%d days',
            M: '1 month',
            MM: '%d months',
            y: '1 year',
            yy: '%d years'
          }
        };
      }
      if (lang === 'de') {
        return {
          relativeTime: {
            future: 'in %s',
            past: 'vor %s',
            s: '1 Sekunde',
            ss: '%d Sekunden',
            m: '1 Minute',
            mm: '%d Minuten',
            h: '1 Stunde',
            hh: '%d Stunden',
            d: '1 Tag',
            dd: '%d Tage',
            M: '1 Monat',
            MM: '%d Monate',
            y: '1 Jahr',
            yy: '%d Jahre'
          }
        };
      }
      return undefined;
    }