Question

我有一个结构化的翻译文件，如下所示：

 "myApp":{
  "errorMessages": {
    "unauthorized": "This {{serviceName}} account is not valid for the {{appName}} app.",
    "missing_role": "You can not use this account to access {{appName}} application"
  }
}

如果我直接访问单个翻译，则可以轻松地使用插值法：

const appNameObject = { appName: 'My app', serviceName: 'My Service' };
const unauthorizedErrorMessage = translateService.instant('myApp.errorMessages.unauthorized', appNameObject);

但是有时候我想一次获取结构化对象中的所有键-在这种情况下插值似乎不起作用

 const errorMessages = translateService.instant('myApp.errorMessages', appNameObject);

我可以使它工作吗？谢谢

Answer 1

ngx-translate不支持此功能。

如果您想/期望得到一个看起来像这样的对象

{
  "unauthorized": "This My Service account is not valid for the My app app.",
  "missing_role": "You can not use this account to access My app application"
}

在有效的示例中，您必须按照自己使用插值的方式自行创建

Answer 2

虽然不能开箱即用，但您可以轻松完成您需要的使用 JSON.stringify() / JSON.parse() 并使用正则表达式自行插入。

在您的 utils 服务或任何其他类似的地方定义一个函数：

const objectInterpolate = (obj: any, params: {[k: string]: any}) => {
  return JSON.parse(
    JSON.stringify(obj)
      .replace(/{{\s*([^}\s]+)\s*}}/gm, (_, group) => params[group] ?? "")
  );
}

然后在您的任何地方使用它：

 this.translate.get("myApp.errorMessages")
   .subscribe(value => {
     this.errorMessages = this.utils.objectInterpolate(
       value, 
       {
         paramName: paramValue,
         paramName2: paramValue2,
         ...
       }
     );
   );

Answer 3

您可以使用正则表达式对参数进行插值。在.replace()函数中，使用匹配字符串通过对象或表调用它们。

使用正则表达式/{{(\w+)}}/gm匹配要替换的字符串

const appNameObject: any = {
  serviceName: 'potatoe'
  appName: 'jam'
}

const message: string = (
  await this.translateService
  .get('myApp.errorMessages.unauthorized')
  .toPromise()
)
.replace(
  /{{(\w+)}}/gm,
  (fullMatch, match) => appNameObject[match]
);

ngx-翻译对象插值

3 个答案: