如何实现PrimeNG菜单栏组件从JSON翻译文件读取多语言内容

问题根因 #

• 原代码中constructor执行时items还未初始化，写在constructor里的翻译逻辑完全无效
• translateService.instant()为静态取值方法，仅调用时获取一次当前语言的翻译结果，无法响应语言切换事件
• PrimeNG的MenuItem为普通对象，没有内置响应式更新能力，需要主动监听语言变更刷新标签

修改后的完整代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { SocialAuthService, SocialUser } from 'angularx-social-login';
import { MenuItem, MessageService } from 'primeng/api';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit, OnDestroy {

  display: boolean = true;
  socialUser: SocialUser = new SocialUser();
  items: MenuItem[] = [];
  // 存储语言订阅，用于销毁时取消
  private langChangeSub: Subscription;

  constructor(
    private socialAuthService: SocialAuthService,
    private toast: MessageService,
    private translateService: TranslateService
  ) { }

  ngOnInit(): void {
    this.socialAuthService.authState.subscribe(user => {
      this.socialUser = user;
    });

    // 初始化菜单，label存储翻译键
    this.items = [
      { label: 'menu.pManagement', icon: 'pi pi-chart-line'},
      { label: 'menu.iList', icon: 'pi pi-wallet', routerLink: 'outsourcing' },
      { label: 'menu.iAnalysis', icon: 'pi pi-clock'}
    ];

    // 初始化时翻译一次菜单
    this.refreshMenuLabels();

    // 监听语言切换事件，每次切换重新翻译菜单
    this.langChangeSub = this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
      this.refreshMenuLabels();
    });
  }

  // 封装菜单标签翻译方法
  private refreshMenuLabels(): void {
    this.items.forEach(item => {
      // 这里item.label存的是翻译键，直接传入instant方法取值即可
      item.label = this.translateService.instant(item.label as string);
    });
  }

  addToast() {
    this.toast.add({
      severity: 'success',
      summary: 'Success',
      detail: ''
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.langChangeSub) {
      this.langChangeSub.unsubscribe();
    }
  }

}

前置检查项 #

• 确保你已经在根模块正确配置了ngx-translate的加载规则，能正常读取对应语言的json翻译文件
• 切换语言的逻辑需要调用translateService.use('语言标识')方法，才会触发onLangChange事件
• 其他语言的json配置文件（比如zh.json）需要和en.json保持相同的层级结构，示例zh.json如下：

{
  "menu" : {
    "pManagement" : "项目管理",
    "iList" : "条目列表",
    "iAnalysis" : "条目分析"
  }
}

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