如何在 ngx-translate 中翻译另一个翻译中的键答案

【问题标题】：How to translate a key inside another translation in ngx-translate如何在 ngx-translate 中翻译另一个翻译中的键
【发布时间】：2020-03-20 10:09:08
【问题描述】：

我有一个翻译 JSON 文件，我想在不同翻译的值内翻译另一个翻译。

{
    "COMPANY_NAME": "Apple",
    "WELCOME_TEXT": "{{ COMPANY_NAME }} welcomes you to California!"
}

我看不到如何在 Angular 9 中使用 ngx-translate 执行此操作，谁能给我指点？

【问题讨论】：

标签： angular ngx-translate

【解决方案1】：

我设法通过实现自定义TranslateCompiler 来实现这一点，如下所示：

我的app.module.ts：

// ...
imports: [
  TranslateModule.forRoot({
    compiler: { provide: TranslateCompiler, useClass: CustomTranslationCompiler }
  })
]
/// ...

我的CustomTranslationCompiler.ts：

import { TranslateCompiler } from '@ngx-translate/core';

export class CustomTranslationCompiler implements TranslateCompiler {
  /**
   * This function is needed to implement the interface, but doesn't
   * actually seem to be used anywhere
   *
   * @param value The translation value
   * @param lang The current language
   */
  public compile(value: string, lang: string): string | Function {
    return value;
  }

  /**
   * Look at every translation and pre-translate any nested translation keys within them
   *
   * @param translations All of the translations for the app to be compiled
   * @param lang The current language
   */
  public compileTranslations(translations: any, lang: string): any {
    for (const key in translations) {
      if (translations.hasOwnProperty(key)) {
        translations[key] = this.translateNestedTranslation(translations[key], translations);
      }
    }

    return translations;
  }

  /**
   * Use a regex to search for and replace translations inside translations
   * with their translated value
   *
   * @param value The translation value
   * @param translations All of the translations for the app
   */
  private translateNestedTranslation(value: string, translations: Object): string {
    const searchRegex  = /{{\s([A-Z_:]*)\s?}}/g;
    const replaceRegex = /({{\s?[A-Z_:]*\s?}})/g;

    const matches = searchRegex.exec(value);
    if (matches && matches.length > 0) {
      const searchKey = matches[1];

      if (translations.hasOwnProperty(searchKey)) {
        // Replace the full translate syntax with the translated value
        value = value.replace(replaceRegex, translations[searchKey]);
      } else {
        // If we can't find the value, display only the missing key instead of the full translate syntax
        value = value.replace(replaceRegex, searchKey);
        console.error(`Error: Unable to find translation '${searchKey}'!`)
      }
    }

    return value;
  }
}

一些注意事项：

使用这种方法，翻译值中定义的任何翻译参数都必须为小写，否则搜索正则表达式无法匹配
搜索和替换正则表达式不同
我不确定为什么永远不会调用 compile() 方法。我的翻译是作为一个对象到达的，所以也许这就是为什么......

【讨论】：

【解决方案2】：

我创建并使用了这个decorator，它启用了参数化翻译键！ https://github.com/mustafah/translations#-parameterized-translations

【讨论】：