Angular父子组件如何保持多语言切换状态一致

问题根本原因 #

两个组件内的translateEn都是各自独立的组件私有变量，仅在自身组件调用switchLang时才会更新。你用的ngx-translate的currentLang本身是全局共享的，但你没有监听全局语言变化事件来同步更新当前组件内的translateEn变量，所以子组件切换语言后回到父组件，父组件的translateEn还是旧值，就出现了不同步的问题。

最优修复方案 #

不管是嵌套父子组件还是路由跳转的父子页面，都推荐直接监听ngx-translate全局的langChange事件来更新当前组件的translateEn，配合Angular生命周期钩子实现，比@Input/@Output传值更简洁，也不会出现路由传值的额外问题。

具体修改步骤 #

1. 两个组件都在生命周期钩子中添加全局语言变化监听 #

在两个组件的ts文件中添加如下逻辑：

import { Subscription } from 'rxjs';

export class xxxComponent {
  private langSub: Subscription;
  translateEn: boolean;

  ngOnInit() {
    // 初始化时先取当前全局语言赋值
    this.translateEn = this.translate.currentLang === 'en';
    // 监听全局语言变化，自动更新translateEn
    this.langSub = this.translate.onLangChange.subscribe(event => {
      this.translateEn = event.lang === 'en';
    });
  }

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

2. 简化switchLang方法 #

不用再重复给translateEn赋值，监听逻辑会自动同步更新：

switchLang(language: string) {
  this.translate.use(language);
  console.log('current' ,this.translate.currentLang);
}

@Input/@Output的适用场景 #

如果你的子组件是直接在父组件模板里嵌套调用的，不是路由跳转的，也可以用@Input/@Output传值实现：

• 父组件把translateEn通过@Input传给子组件
• 子组件切换语言时用@Output触发事件，通知父组件更新translateEn
  如果是路由跳转的父子页面，@Input/@Output无法直接生效，优先用上面的全局监听方案。

额外优化建议 #

你模板里的中英文判断逻辑可以进一步简化，不需要维护translateEn变量，直接判断translate.currentLang === 'en'就行，连变量都不用维护，也不会有同步问题：
比如父组件模板可以改成：

<div *ngIf="translate.currentLang === 'en'; then thenBlock else elseBlock"></div>
<ng-template #thenBlock><p class="title-room">{{ room.title }}</p></ng-template>
<ng-template #elseBlock> <p class="title-room">{{ room.titleEs }}</p></ng-template>

内容的提问来源于stack exchange，提问作者Rafael Hernández