Angular中TypeScript变量绑定TranslateService切换语言后文本不更新问题

你当前写法失效的核心原因是JavaScript中字符串是原始值类型，初始化userProfileMenuOptions时，是把当时changeLocaleText的字符串值拷贝给了数组项的text属性，后续修改changeLocaleText变量只是改变了该变量的存储值，不会同步更新数组里已经存好的旧字符串，和Angular的响应式机制无关。

方案1：抽离菜单生成逻辑，语言切换时重建数组（最稳妥，兼容性最好） #

这是适配性最高的方案，不需要担心消费组件的兼容问题：Angular生态下的绝大多数组件（包括原生组件、第三方UI库的菜单组件），只要输入的数组引用发生变化，都会触发变更检测更新视图。
你不需要单独维护changeLocaleText变量，把菜单生成逻辑抽成独立方法，在初始化和语言切换时分别调用即可：

// 记得在组件类中添加OnDestroy生命周期实现，避免订阅内存泄漏
private readonly destroy$ = new Subject<void>();

ngOnInit() {
  // 首次初始化菜单，因项目已预加载所有语言包，instant可直接安全调用
  this.buildUserProfileMenu();

  // 监听语言切换，重新生成菜单
  this.customTranslateService.translateService.onLangChange
    .pipe(takeUntil(this.destroy$))
    .subscribe(() => {
      this.buildUserProfileMenu();
    });
}

private buildUserProfileMenu() {
  this.userProfileMenuOptions = [
    {
      text: this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale"),
      itemId: "LocaleSelect"
    },
    {
      text: "Report a bug",
      itemId: "BugReport"
    },
    {
      text: "Request a feature",
      itemId: "FeatureRequest"
    },
    {
      text: "Log Out",
      itemId: "LogOut"
    }
  ];
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

方案2：仅更新动态菜单项的文本属性（最小改动） #

因为除了多语言切换的那一项，其余菜单项都是静态文本，你也可以不重建整个数组，直接在语言切换回调里修改对应菜单项的text属性：

private readonly destroy$ = new Subject<void>();

ngOnInit() {
  // 初始化菜单
  this.userProfileMenuOptions = [
    {
      text: this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale"),
      itemId: "LocaleSelect"
    },
    {
      text: "Report a bug",
      itemId: "BugReport"
    },
    {
      text: "Request a feature",
      itemId: "FeatureRequest"
    },
    {
      text: "Log Out",
      itemId: "LogOut"
    }
  ];

  this.customTranslateService.translateService.onLangChange
    .pipe(takeUntil(this.destroy$))
    .subscribe(() => {
      const localeItem = this.userProfileMenuOptions.find(item => item.itemId === "LocaleSelect");
      if (localeItem) {
        localeItem.text = this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale");
      }
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

注意：如果消费菜单的组件使用了ChangeDetectionStrategy.OnPush变更检测策略，且没有针对输入的数组做深层变更检测，这种不改变数组引用、仅修改内部属性的写法可能无法触发视图更新，这种场景下优先选择方案1。

方案3：模板层绑定翻译（最佳实践） #

如果你用的菜单组件支持自定义菜单项模板，完全不需要在TS层处理翻译逻辑，只需要把翻译key作为菜单项的字段传入，在自定义模板中用translate管道绑定文本即可，管道本身会自动监听语言变更、同步更新视图，不需要手动订阅onLangChange事件，也不用手动维护翻译值的更新。

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