如何用单选按钮实现Angular网站从英文切换至西班牙语

一、安装并配置 ngx-translate #

首先安装依赖包：

npm install @ngx-translate/core @ngx-translate/http-loader --save

在app.module.ts中配置翻译模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 翻译文件加载工厂函数
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

二、创建全局语言管理服务 #

新建language.service.ts，用于持久化语言选择并全局共享：

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Injectable({
  providedIn: 'root'
})
export class LanguageService {
  constructor(private translate: TranslateService) {
    // 初始化时读取本地存储的语言，无则用默认值
    const savedLang = localStorage.getItem('selectedLanguage');
    savedLang ? this.setLanguage(savedLang) : this.setLanguage('en');
  }

  setLanguage(langKey: string): void {
    // 映射单选框值到标准语言代码：'e'→'en'，'s'→'es'
    const langCode = langKey === 'e' ? 'en' : 'es';
    this.translate.use(langCode);
    localStorage.setItem('selectedLanguage', langCode);
  }

  getCurrentLanguage(): string {
    return this.translate.currentLang;
  }
}

三、修改语言选择组件 #

更新language-select.component.ts，用服务保存语言选择并优化表单验证：

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

@Component({
  selector: 'app-language-select',
  templateUrl: './language-select.component.html',
  styleUrls: ['./language-select.component.css']
})
export class LanguageSelectComponent {
  errorMessage?: string;

  constructor(
    private router: Router,
    private languageService: LanguageService
  ) {}

  navigateIfYes(form: NgForm): void {
    if (form.invalid) {
      this.errorMessage = 'LANG_SELECT.ERROR';
      return;
    }
    this.errorMessage = undefined;
    // 保存选中的语言并跳转
    this.languageService.setLanguage(form.value.language);
    this.router.navigateByUrl("/government");
  }

  onSubmit(form: NgForm): void {
    console.log(form);
  }
}

更新模板language-select.component.html，使用翻译管道加载文本：

<div class="container tb-10">
    <form (ngSubmit)="onSubmit(langForm)" #langForm="ngForm">
        <div>
            <div class="row">
                <h4>{{ 'LANG_SELECT.TITLE' | translate }}</h4>
                <div class="form-group">
                    <div>
                        <label>
                            <input type="radio" name="language" value="e" ngModel required> {{ 'LANG_SELECT.ENGLISH' | translate }}&nbsp;&nbsp;
                        </label><br>

                        <label>
                            <input type="radio" name="language" value="s" ngModel required> {{ 'LANG_SELECT.SPANISH' | translate }}&nbsp;&nbsp;
                        </label>
                    </div>
                </div>
                <div>
                    <h4>{{ 'LANG_SELECT.SPANISH_PROMPT' | translate }}</h4>
                </div>     
                <div>
                    <p *ngIf="errorMessage" class="text-danger">{{ errorMessage | translate }}</p>
                </div>   
            </div>
        </div>
        <footer>
            <button id="exit" class="btn btn-danger pull-left" >{{ 'LANG_SELECT.EXIT' | translate }}</button>
            <button type="submit" class="btn btn-primary" (click)="navigateIfYes(langForm)"> {{ 'LANG_SELECT.NEXT' | translate }} </button>
        </footer>
    </form>
</div>

四、创建翻译文件 #

在assets/i18n目录下创建两个翻译文件：

en.json（英文） #

{
  "LANG_SELECT": {
    "TITLE": "Please select a language:",
    "ENGLISH": "English",
    "SPANISH": "Spanish",
    "SPANISH_PROMPT": "To continue in Spanish, please select Spanish.",
    "EXIT": "Exit",
    "NEXT": "Next",
    "ERROR": "Please click on one of the option buttons above before submitting form!"
  },
  "GOVERNMENT_PAGE": {
    "WELCOME": "Welcome to the Government Page",
    "CONTENT": "This is the content displayed in English."
  }
}

es.json（西班牙语） #

{
  "LANG_SELECT": {
    "TITLE": "Por favor seleccione un idioma:",
    "ENGLISH": "Inglés",
    "SPANISH": "Español",
    "SPANISH_PROMPT": "Para continuar en Español, por favor seleccione Español.",
    "EXIT": "Salir",
    "NEXT": "Siguiente",
    "ERROR": "¡Por favor haga clic en uno de los botones de opción anteriores antes de enviar el formulario!"
  },
  "GOVERNMENT_PAGE": {
    "WELCOME": "Bienvenido a la página de Gobierno",
    "CONTENT": "Este es el contenido mostrado en español."
  }
}

五、在后续页面使用翻译 #

以government.component.html为例：

<div class="container">
  <h1>{{ 'GOVERNMENT_PAGE.WELCOME' | translate }}</h1>
  <p>{{ 'GOVERNMENT_PAGE.CONTENT' | translate }}</p>
</div>

方案说明 #

• 用localStorage持久化语言选择，刷新页面后不会丢失设置
• 通过全局服务统一管理语言状态，所有组件可随时获取当前语言
• 表单验证使用Angular原生required属性，替代DOM类检查，更符合框架规范
• 所有文本通过翻译管道动态加载，实现语言切换后全局文本自动更新

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