如何用Angular官方i18n库实现应用的运行时语言切换？

Angular官方i18n默认采用构建时本地化策略，每个语言版本会被打包为独立的bundle，原生并不支持无刷新的运行时动态切换。但通过以下两种方案，可以模拟实现用户需要的交互效果，且无需重新构建应用：

方案一：多语言bundle + 路由切换（推荐，保留原生优化） #

该方案基于ng build --localize生成的多语言独立bundle，通过路由前缀切换语言，体验接近无刷新，同时保留Angular i18n的编译时优化特性。

实现步骤 #

1. 构建多语言bundle
   执行ng build --localize，Angular会在dist目录下生成对应语言的子目录（如/en/、/fr/），每个目录包含独立的应用bundle。

2. 配置路由前缀
   在根路由中添加语言前缀的匹配规则，默认跳转至默认语言：

   const routes: Routes = [
     { path: '', redirectTo: '/en', pathMatch: 'full' },
     // 懒加载对应语言的模块（需为每个语言创建独立模块）
     { path: 'en', loadChildren: () => import('./lang/en/en.module').then(m => m.EnModule) },
     { path: 'fr', loadChildren: () => import('./lang/fr/fr.module').then(m => m.FrModule) },
   ];
   

3. 语言切换服务
   创建服务处理语言切换逻辑，修改URL前缀并预加载目标语言bundle：

   import { Injectable } from '@angular/core';
   import { Location, Router } from '@angular/common';
   
   @Injectable({ providedIn: 'root' })
   export class LanguageService {
     constructor(private location: Location, private router: Router) {}
   
     switchLanguage(targetLang: 'en' | 'fr') {
       // 保留当前路由路径，替换语言前缀
       const currentPath = this.location.path().replace(/^\/[a-z]{2}/, '');
       const newUrl = `/${targetLang}${currentPath}`;
       
       // 预加载目标语言bundle（避免首次切换时加载延迟）
       this.preloadBundle(targetLang);
       
       // 切换路由，触发对应语言模块加载
       this.router.navigateByUrl(newUrl);
     }
   
     private preloadBundle(lang: string) {
       const scriptExists = document.querySelector(`script[src="/${lang}/main.js"]`);
       if (!scriptExists) {
         const script = document.createElement('script');
         script.src = `/${lang}/main.js`;
         script.async = true;
         document.body.appendChild(script);
       }
     }
   }
   

4. 模板添加切换按钮

   <button (click)="languageService.switchLanguage('en')">English</button>
   <button (click)="languageService.switchLanguage('fr')">Français</button>
   

方案二：动态加载翻译表（灵活但需手动处理i18n特性） #

该方案脱离Angular i18n的编译时替换，通过自定义服务和管道动态加载翻译文件，实现真正的运行时切换，但需要手动处理ICU表达式、复数等i18n特性。

实现步骤 #

1. 转换翻译文件为JSON
   将生成的.xlf翻译文件手动或通过工具转换为JSON格式，放置在assets/i18n/目录下：

   // assets/i18n/fr.json
   {
     "welcome.message": "Bienvenue dans notre application",
     "button.submit": "Soumettre"
   }
   

2. 翻译服务
   创建服务管理当前语言和翻译表：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class TranslationService {
     private currentLang$ = new BehaviorSubject<string>('en');
     private translations: Record<string, string> = {};
   
     constructor(private http: HttpClient) {
       this.loadTranslations(this.currentLang$.value);
     }
   
     switchLanguage(lang: string) {
       this.currentLang$.next(lang);
       this.loadTranslations(lang);
     }
   
     private loadTranslations(lang: string) {
       this.http.get<Record<string, string>>(`/assets/i18n/${lang}.json`)
         .subscribe(translations => this.translations = translations);
     }
   
     get(key: string): string {
       return this.translations[key] || key;
     }
   }
   

3. 自定义翻译管道
   创建纯管道（设置pure: false确保语言切换时刷新视图）：

   import { Pipe, PipeTransform } from '@angular/core';
   import { TranslationService } from './translation.service';
   
   @Pipe({ name: 'i18n', pure: false })
   export class I18nPipe implements PipeTransform {
     constructor(private translationService: TranslationService) {}
   
     transform(key: string): string {
       return this.translationService.get(key);
     }
   }
   

4. 模板使用管道

   <button (click)="translationService.switchLanguage('en')">English</button>
   <button (click)="translationService.switchLanguage('fr')">Français</button>
   
   <h1>{{ 'welcome.message' | i18n }}</h1>
   <button>{{ 'button.submit' | i18n }}</button>
   

方案对比与最佳实践 #

如果追求性能和原生特性支持，优先选择方案一；如果需要更灵活的翻译管理（比如动态更新翻译），可以选择方案二。

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