PrimeNg+JHipster：在Growl消息中集成JHipster翻译问题

嘿，作为JHipster + Angular + PrimeNG的新手，遇到这个翻译问题太正常了！JHipster本身已经集成了ngx-translate来处理国际化，我们只需要把它和PrimeNG的Message组件结合起来就行，下面是具体步骤：

1. 注入TranslateService到组件 #

首先，你需要在组件里导入并注入JHipster内置的TranslateService，它是处理翻译的核心工具：

import {Message} from 'primeng/components/common/api';
import {TranslateService} from '@ngx-translate/core'; // 导入翻译服务

export class MyComp implements OnInit {
 msgs: Message[] = [];

 // 在构造函数中注入TranslateService
 constructor(private translateService: TranslateService) {}

 callError() {
  // 后续修改这里的逻辑
 }
}

2. 修改方法，动态获取翻译文本 #

TranslateService的get()方法可以根据键值获取对应语言的翻译内容，它返回一个Observable，所以我们需要订阅它来拿到翻译后的文本，再更新PrimeNG的消息数组：

callError() {
  this.msgs = [];
  // 一次性获取summary和detail对应的翻译（也可以分开单独获取）
  this.translateService.get(['error.summary', 'error.errorOccured']).subscribe(translations => {
    this.msgs.push({
      severity: 'error',
      summary: translations['error.summary'],
      detail: translations['error.errorOccured']
    });
  });
}

3. 确保翻译文件中有对应键值 #

别忘了在你的JSON翻译文件（比如src/main/webapp/assets/i18n/en.json或对应语言的文件）里添加对应的条目，比如英文版本：

{
  "error": {
    "summary": "Error",
    "errorOccured": "An error has occurred!"
  }
}

4. 可选：封装通用方法（减少重复代码） #

如果你的应用里经常要显示带翻译的PrimeNG消息，可以封装一个通用方法，让代码更简洁：

private addTranslatedMessage(severity: string, summaryKey: string, detailKey: string) {
  this.translateService.get([summaryKey, detailKey]).subscribe(translations => {
    this.msgs.push({
      severity: severity,
      summary: translations[summaryKey],
      detail: translations[detailKey]
    });
  });
}

// 调用时就简单多了
callError() {
  this.msgs = [];
  this.addTranslatedMessage('error', 'error.summary', 'error.errorOccured');
}

这样就能完美实现用JSON翻译文件来渲染PrimeNG的消息内容啦！

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