Angular中如何实现动态变量值的翻译

我最近在Angular项目里搞定了特定静态词汇的多语言翻译需求——因为项目本身已经接入了谷歌翻译API，但有些词汇的翻译结果客户不满意，所以得单独做自定义翻译。下面是我实现的完整流程：

第一步：创建自定义翻译JSON文件 #

先准备一个JSON文件来存我们需要自定义的词汇翻译，结构如下（你可以根据需要扩展更多词汇）：

{
  "Sign In": {
    "en": "Sign In",
    "nl": "Inloggen",
    "fr": "Se connecter",
    "de": "Anmeldung"
  },
  "Welcome": {
    "en": "Welcome",
    "nl": "Welkom",
    "fr": "Bienvenue",
    "de": "Willkommen"
  }
}

我把这个文件放在了assets/translations/custom-translations.json路径下，方便Angular通过HttpClient加载。

第二步：编写LanguageService服务 #

接下来创建一个全局的LanguageService，用来加载翻译文件、管理当前语言、提供翻译方法，完整代码如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, Observable, tap } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LanguageService {

  public translations: any;
  private langSubject = new Subject<string>();
  // 暴露可观察对象，让组件监听语言变化
  langSubject$ = this.langSubject.asObservable();
  currentLang = 'en'; // 默认语言设为英文

  constructor(private http: HttpClient) {
    // 初始化时加载翻译文件
    this.loadTranslations();
  }

  // 加载自定义翻译JSON
  private loadTranslations(): void {
    this.http.get('./assets/translations/custom-translations.json')
      .pipe(
        tap((translations) => {
          this.translations = translations;
        })
      )
      .subscribe();
  }

  // 切换语言的方法
  switchLanguage(lang: string): void {
    this.currentLang = lang;
    // 通知所有订阅者语言已切换
    this.langSubject.next(lang);
  }

  // 获取指定词汇的翻译
  translate(key: string): string {
    // 检查是否存在对应翻译，不存在则返回原词汇作为兜底
    if (this.translations?.[key]?.[this.currentLang]) {
      return this.translations[key][this.currentLang];
    }
    // 如果需要结合谷歌API，可以在这里调用原有翻译方法
    // return this.googleTranslateService.translate(key, this.currentLang);
    return key;
  }
}

第三步：在组件中使用翻译服务 #

现在可以在任意组件里注入这个服务，实现翻译展示和语言切换功能，举个简单的例子：

import { Component } from '@angular/core';
import { LanguageService } from './services/language.service';

@Component({
  selector: 'app-root',
  template: `
    <div class="lang-switcher">
      <button (click)="switchLang('en')">English</button>
      <button (click)="switchLang('nl')">Nederlands</button>
      <button (click)="switchLang('fr')">Français</button>
      <button (click)="switchLang('de')">Deutsch</button>
    </div>
    <h2>{{ languageService.translate('Sign In') }}</h2>
    <p>{{ languageService.translate('Welcome') }}</p>
  `,
  styles: [`
    .lang-switcher button {
      margin: 0 5px;
      padding: 8px 12px;
      cursor: pointer;
    }
  `]
})
export class AppComponent {
  constructor(public languageService: LanguageService) {}

  switchLang(lang: string): void {
    this.languageService.switchLanguage(lang);
  }
}

一些实用提示 #

• 如果项目里已经有谷歌翻译API，可以在translate方法里先检查自定义翻译，找不到再调用谷歌的翻译接口，这样就能兼顾自定义需求和通用翻译；
• 可以把常用的语言切换逻辑封装成一个组件，方便在整个项目中复用；
• 记得在Angular的angular.json里确保assets目录被正确配置，这样翻译文件才能被打包访问到。

备注：内容来源于stack exchange，提问作者Geetika