如何获取I18n变量值并传递给Angular父组件？

核心思路 #

去掉手动输入框，直接通过按钮点击切换到未使用的目标语言，同时向父组件传递语言值。

步骤1：组件类逻辑实现 #

import { Component, Output, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-lang-switcher',
  templateUrl: './lang-switcher.component.html'
})
export class LangSwitcherComponent {
  currentLang: string;
  // 映射当前语言对应的切换文本翻译键
  langMap = {
    'en': 'global.lang_zh',   // 英文环境下显示"中文"的翻译键
    'zh-CN': 'global.lang_en' // 中文环境下显示"English"的翻译键
  };

  @Output() langChanged = new EventEmitter<string>(); // 向父组件传值的事件

  constructor(private translate: TranslateService) {
    this.currentLang = this.translate.currentLang || 'zh-CN';
    // 监听系统语言变化，同步当前语言状态
    this.translate.onLangChange.subscribe(() => {
      this.currentLang = this.translate.currentLang;
    });
  }

  switchLanguage() {
    // 计算目标语言（与当前语言相反）
    const targetLang = this.currentLang === 'zh-CN' ? 'en' : 'zh-CN';
    // 切换语言
    this.translate.use(targetLang);
    // 向父组件传递目标语言值
    this.langChanged.emit(targetLang);
  }
}

步骤2：模板简化 #

不需要输入框，直接用按钮触发切换，按钮文本通过翻译管道动态渲染：

<button type="button" (click)="switchLanguage()">
  {{ langMap[currentLang] | translate }}
</button>

关于翻译值存入变量的问题 #

如果需要把翻译文本存入组件变量（而非直接在模板用管道），可以用TranslateService.get()方法：

switchText: string;

ngOnInit() {
  this.updateSwitchText();
}

updateSwitchText() {
  const translateKey = this.langMap[this.currentLang];
  this.translate.get(translateKey).subscribe(text => {
    this.switchText = text;
  });
}

模板中直接使用变量：

<button type="button" (click)="switchLanguage()">
  {{ switchText }}
</button>

父组件监听语言变化 #

在父组件模板中使用子组件时，监听langChanged事件：

<app-lang-switcher (langChanged)="handleLangChange($event)"></app-lang-switcher>

父组件类实现处理逻辑：

handleLangChange(lang: string) {
  // 这里处理父组件收到语言值后的逻辑，比如存储到本地存储等
  console.log('切换到语言:', lang);
}

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