Как реализовать локализацию как для пользовательского интерфейса, так и для значений в angular при получении данных перевода из базы данных? - PullRequest
Новая
       38

Как реализовать локализацию как для пользовательского интерфейса, так и для значений в angular при получении данных перевода из базы данных?

0 голосов
/ 28 апреля 2020

У меня есть проект, в котором я пытаюсь создать локализацию для приложения Angular, и мне трудно решить эту проблему.

В этом проекте нам нужна CMS (система управления контентом), где другие люди могут редактировать текст пользовательского интерфейса, а также переводы значений, полученных из базы данных.

Есть ДВА случаи использования в этой проблеме. Прежде всего мне нужно уметь использовать локализацию и перевод в UI-элементах, а также редактировать их в бэкэнде. В другом случае я получаю значения из базы данных, и мне нужно перевести полученные значения на правильный язык. И сделать их обоих динамическими c.

База данных в настоящее время имеет следующую настройку: Одна таблица со следующими столбцами: ID, TextType, TextStatus, TextName, TextHeader, TextKey, Text01, Text02, Text03, Text04, Text05, Text06, Text07, Text08, Text09, Text10, CreationDate, ChangedBy, ChangedDate.

ID: идентификатор, сгенерированный базой данных, и переходы между TEST / SYST / PROD и поэтому не очень актуально. TextType: тип элемента, для которого он предполагается использовать. Например, «LookupTable» TextStatus: логическое сохранение, должен ли перевод использоваться или нет TextName: текущее имя перевода fx. "securityUnderlyingType" TextHeader: имя значения в нашем мэйнфрейме DB2 TextKey: ключ, используемый для идентификации перевода, который следует использовать на основе значения. Fx. значение, возвращаемое мэйнфреймом, равно 80. Тогда это поле содержит 80, и тогда переводы будут текстовой версией, переведенной с этого ключа. Так 80 = Бонд например. Text01-Text10: разные языки, сохраненные в текущем фрагменте данных CreationDate: дата создания перевода ChangedBy: пользователь, который последний раз редактировал этот перевод ChangedDate: дата последнего перевода перевода

Пример obj: 

[
  0: [
      {
       Id: "ac1b0441-1580-4552-9b85-9118c80d2ec3", 
       TextType: "LookupTable", 
       TextStatus: true, 
       TextName: "SecurityType", 
       TextHeader: "SecurityType", 
       TextKey: "95", 
       Text01: "Diverse", 
       Text02: "Others", 
       Text03: "Muut", 
       Text04: "Diverse", 
       Text05: "Diverse", 
       Text06: null, 
       Text07: null, 
       Text08: null, 
       Text09: null, 
       Text10: null, 
       CreationDate: "2020-02-28T00:00:00", 
       ChangedBy: "Y648540", 
       ChangedDate: "2020-02-28T00:00:00" 
      }
     ],
  1: [],
  ...  ,
 99: []
]

Сейчас я попытался загрузить эти переводы на наш NGXS Store, но проблема возникает, когда необходимо обновить языки на основе нового выбора нового языка. , Хранилище публикует весь объект перевода, и поэтому недостаточно просто подписаться на хранилище, поскольку это означает, что мне нужно указать, к какому значению из подписки я хочу получить доступ. Поэтому мне нужно соединить пользовательский интерфейс и значения, полученные с одним из переводов.

Это еще более усложняется тем, что есть и эти TextKeys. Ключи - это то, что фактически получено от мэйнфрейма, и должно быть переведено в текст, а затем на правильный язык.

Если я хочу использовать локализацию и сделать локализацию динамической c Я предполагаю, что существует необходимость в directive, на который ссылаются все возможные варианты использования локализации, но мои текущие попытки не удалось.

Оба Transloco и i18n localization не будут работать в этом случае использования из-за перспектив:

  • Должен быть в состоянии перевести TextType, TextName и TextKey в правильный текст
  • Должен иметь возможность получать файлы перевода из базы данных
  • должен иметь возможность обновлять файлы перевода во время работы приложения без перезагрузки приложения.
  • должен иметь возможность использовать файлы перевода для преобразования вставленного значения в форму обратно в правильное значение TextKey, например, «Bond» становится «80», независимо от того, на каком языке оно было написано. В качестве примечания : Значение, вставленное в поле, изменяется. Fx поле AssetType может иметь много разных значений. Таким образом, недостаточно просто привязать поле к TextKey

ПРИМЕР UI: Пример интерфейса здесь заполнители должны переключаться при переключении языка, а значения должны переключаться при переключении языка.

Мой сервис для магазина NGXS выглядит следующим образом: 

@Injectable()
export class TranslationDataStateService {
  @Select(TranslationDataState.fullTranslation)
  public fullTranslationDataState$: Observable<TranslationDataStateModel>;

  @Select(TranslationDataState.translations)
  public translationsDataState$: Observable<TranslationRow[]>;

  @Select(TranslationDataState.isLoading)
  public isLoading$: Observable<boolean>;

  @Select(TranslationDataState.languageSelected)
  public languageSelected$: Observable<string>;

  @Select(TranslationDataState.errorMessage)
  public errorMessage$: Observable<string>;

  @Dispatch({ cancelUncompleted: true })
  public SetLocalizationData = (input: TranslationDataStateModel) =>
    new SetLocalizationData(input);
  @Dispatch({ cancelUncompleted: true })
  public PatchLocalizationData = (input: TranslationRow[]) =>
    new PatchLocalizationData(input);
  @Dispatch({ cancelUncompleted: true })
  public SetLanguageSelected = (input: string) =>
    new SetLanguageSelected(input);
  @Dispatch({ cancelUncompleted: true })
    public SetIsLoading = (input: boolean) => new SetIsLoading(input);
  @Dispatch({ cancelUncompleted: true })
    public SetErrorMessage = (input: string) => new SetErrorMessage(input);
}
...