Angular国际化怎么做

Angular 国际化（i18n）是指将 Angular 应用程序翻译成多种语言，以便为全球用户提供更好的体验。以下是实现 Angular 国际化的基本步骤：

1. 安装 Angular 本地化包： 使用 Angular CLI，可以通过运行以下命令来安装所需的语言包和本地化工具：

   ng add @angular/localize
   

   这将安装 Angular 的核心库以及英语（美国）的本地化文件。

2. 提取文本： 使用 Angular CLI 的 ngx-translate 工具提取应用程序中的所有可翻译文本。首先，需要安装 ngx-translate：

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

   然后，在 app.module.ts 中导入 TranslateModule 并配置：

   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);
   }
   
   @NgModule({
     imports: [
       HttpClientModule,
       TranslateModule.forRoot({
         loader: {
           provide: TranslateLoader,
           useFactory: HttpLoaderFactory,
           deps: [HttpClient]
         }
       })
     ],
     // ...
   })
   export class AppModule { }
   

   接下来，使用 Angular CLI 提取文本：

   ng xi18n --output-path locale
   

   这将在 locale 文件夹中生成一个名为 messages.xlf 的文件，其中包含所有可翻译文本。

3. 翻译文本： 使用 XLIFF 文件格式，为每种目标语言创建一个单独的文件。例如，对于法语，可以创建一个名为 messages.fr.xlf 的文件。然后，使用翻译工具（如 Poedit）或手动编辑这些文件，将文本从英语翻译成目标语言。

4. 加载翻译文件： 在 app.module.ts 中，配置 TranslateLoader 以加载适当的翻译文件：

   TranslateModule.forRoot({
     loader: {
       provide: TranslateLoader,
       useFactory: HttpLoaderFactory,
       deps: [HttpClient]
     },
     defaultLanguage: 'en',
     fallbackLanguage: 'en',
     loaderOptions: {
       load: (language: string) => {
         return import(`./locale/messages.${language}.xlf`).then((m) => m.default);
       }
     }
   })
   

5. 使用翻译管道和指令： 在应用程序中使用 translate 管道和指令来显示翻译后的文本。例如：

   <h1 translate>Hello, World!</h1>
   <button (click)="changeLanguage('fr')">French</button>
   

   在组件类中，可以使用 TranslateService 来更改当前语言：

   import { TranslateService } from '@ngx-translate/core';
   
   constructor(private translate: TranslateService) {}
   
   changeLanguage(language: string) {
     this.translate.use(language);
   }
   

6. 构建多语言应用程序： 使用 Angular CLI 的 build 命令构建应用程序，并指定要包含的语言。例如，要同时构建英语和法语版本，可以运行：

   ng build --prod --i18n-file locale/messages.en.xlf --i18n-file locale/messages.fr.xlf --i18n-lang en,fr
   

   这将在 dist/ 文件夹中生成两个子文件夹（en 和 fr），其中包含每种语言的翻译文件。

现在，应用程序已成功实现国际化，可以根据用户选择的语言显示相应的文本。