Ionic 6中如何使用ngx-translate翻译动态字符串？

我来帮你解决这个问题！你现在的情况是从central.json拿到的动态文本没法直接用ngx-translate翻译，核心问题是ngx-translate需要翻译key来匹配对应语言文件里的内容，而你现在的product.title是最终要显示的文本，不是key。这里有几个可行的方案，你可以根据自己的情况选择：

方案一：修改central.json，存储翻译key（推荐） #

这是最规范的做法，把你的central.json里的显示文本换成对应的翻译标识（key），比如：

public product: Product[] = [ 
  { 
    id:0, 
    titleKey: 'uk_information', // 把原来的title换成翻译key
    descriptionKey: 'travel_tips',
    extrainfo:'', 
    ...
  }
];

然后在你的语言文件里配置对应翻译：

• assets/i18n/en.json：

  {
    "uk_information": "UK Information",
    "travel_tips": "Travel tips"
  }
  

• assets/i18n/fr.json：

  {
    "uk_information": "Informations sur le Royaume-Uni",
    "travel_tips": "Conseils de voyage"
  }
  

最后在页面上直接用key加翻译管道：

{{ product.titleKey | translate }}
{{ product.descriptionKey | translate }}

方案二：保留原central.json，做文本到翻译key的映射 #

如果没法修改central.json的结构，可以在组件里创建一个文本到翻译key的映射表，把动态获取的文本转换成对应的key：
首先在组件里定义映射：

// 组件类里
titleToTranslateKey: Record<string, string> = {
  'UK Information': 'uk_information',
  'Travel tips': 'travel_tips',
  // 把所有需要翻译的文本都对应到key上
};

然后在页面上使用：

{{ titleToTranslateKey[product.title] | translate }}

这样也能通过动态文本找到对应的翻译key，进而获取正确的翻译内容。

方案三：直接用文本作为翻译key（不推荐） #

如果不想做映射或修改数据源，也可以直接把product.title的文本作为翻译key，在语言文件里直接用原文本作为key：

• assets/i18n/en.json：

  {
    "UK Information": "UK Information",
    "Travel tips": "Travel tips"
  }
  

• assets/i18n/fr.json：

  {
    "UK Information": "Informations sur le Royaume-Uni",
    "Travel tips": "Conseils de voyage"
  }
  

这种情况下你原来的{{ product.title | translate }}就能直接生效，但这种方式不推荐——如果后续原文本（比如central.json里的title）发生变化，你需要同步修改所有语言文件的key，维护成本很高。

额外注意 #

确保你的ngx-translate已经正确配置：比如在app.module里导入了TranslateModule.forRoot()，配置了TranslateHttpLoader来加载assets里的语言文件，这些基础配置没问题的话，上面的方案都能正常工作。

内容的提问来源于stack exchange，提问作者user1557466