如何同步使用ngx-translate翻译MenuItem并完成组件绑定？

方案一：使用async/await + firstValueFrom 同步处理异步翻译 #

将菜单创建方法改为异步函数，通过firstValueFrom获取翻译结果后再构建菜单、执行额外处理，最后赋值给组件。

修改菜单创建函数 #

import { firstValueFrom } from 'rxjs';

private async createContextMenuItems(): Promise<MenuItem[]> {
  // 一次性获取所有需要的翻译键，提升性能
  const translations = await firstValueFrom(this.translate.get([
    'VOICEMAIL_INBOX.PLAY_VIEW',
    // 添加其他需要翻译的菜单键
  ]));

  const menuItems: MenuItem[] = [
    {
      id: 'play',
      label: translations['VOICEMAIL_INBOX.PLAY_VIEW'],
      icon: 'pi pi-play',
    },
    // 其他菜单项
  ];

  // 执行额外处理逻辑
  doSomeAdditionalWork(menuItems);
  return menuItems;
}

在组件生命周期中等待完成并赋值 #

在ngOnInit（或其他合适的生命周期钩子）中调用异步函数，等待翻译完成后绑定菜单：

async ngOnInit(): Promise<void> {
  this.contextMenuItems = await this.createContextMenuItems();
}

方案二：监听翻译加载完成事件（适配语言切换） #

如果需要响应语言切换自动更新菜单，可通过监听TranslateService的onLangChange事件，确保翻译加载完成后调用instant()获取正确值：

初始化菜单逻辑 #

ngOnInit(): void {
  // 先尝试获取翻译，判断是否已加载
  const testKey = 'VOICEMAIL_INBOX.PLAY_VIEW';
  const initialTranslation = this.translate.instant(testKey);
  
  if (initialTranslation !== testKey) {
    // 翻译已加载，直接初始化菜单
    this.initContextMenu();
  } else {
    // 翻译未加载，订阅语言变化事件（首次加载完成也会触发）
    this.translate.onLangChange.subscribe(() => {
      this.initContextMenu();
    });
  }
}

private initContextMenu(): void {
  const menuItems: MenuItem[] = [
    {
      id: 'play',
      label: this.translate.instant('VOICEMAIL_INBOX.PLAY_VIEW'),
      icon: 'pi pi-play',
    },
    // 其他菜单项
  ];

  doSomeAdditionalWork(menuItems);
  this.contextMenuItems = menuItems;
}

补充说明 #

• instant()返回键名的原因是翻译文件尚未加载完成，只有当翻译资源加载完毕后，instant()才能返回正确的翻译值。
• 方案一适合只需要初始化一次菜单的场景；方案二则能自动处理语言切换后的菜单更新。

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