Angular 5 中select标签的国际化(i18n)实现方法咨询

看起来你在给Angular 5的select下拉框做国际化时，混合使用了ngx-translate的translate管道和Angular原生的i18n属性，这可能会导致逻辑混淆。我来分两种常用的实现方案帮你梳理清楚：

方案一：基于ngx-translate实现（适配你现有代码） #

你目前的代码里已经用到了translate管道，说明你大概率引入了ngx-translate库，那我们可以沿着这个思路完善：

1. 确保ngx-translate已正确配置
   首先确认你已经安装了适配Angular 5的依赖版本：

   npm install @ngx-translate/core@^9.1.1 @ngx-translate/http-loader@^2.0.1 --save
   

   然后在AppModule中配置TranslateModule：

   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]
         }
       })
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 创建翻译文件
   在assets/i18n目录下创建对应语言的JSON文件，比如：

   • en.json（英文）：

     {
       "OPEN": "Open",
       "CLOSED": "Closed",
       "RISK ACCEPTED": "Risk Accepted",
       "ALL": "All"
     }
     

   • zh.json（中文）：

     {
       "OPEN": "打开",
       "CLOSED": "关闭",
       "RISK ACCEPTED": "风险已接受",
       "ALL": "全部"
     }
     

3. 修正HTML代码
   移除option上的i18n属性（它是Angular原生国际化的标记，和ngx-translate不兼容），保留translate管道即可：

   <select name="colCaseType" type="string" [(ngModel)]="colCaseType" #select4> 
     <option *ngFor="let level of caseType" [ngValue]="level.caseStatus"> 
       {{level.caseStatus | translate}}
     </option> 
   </select>
   

4. 添加语言切换功能（可选）
   在组件中注入TranslateService，即可实现前端动态切换语言：

   import { Component } from '@angular/core';
   import { TranslateService } from '@ngx-translate/core';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent {
     public caseType: Array<Object> = [ 
       {caseStatus: 'OPEN'}, 
       {caseStatus: 'CLOSED'}, 
       {caseStatus: 'RISK ACCEPTED'}, 
       {caseStatus: 'ALL'} 
     ];
     colCaseType: string;
   
     constructor(private translate: TranslateService) {
       // 设置默认语言
       translate.setDefaultLang('en');
       // 切换到中文（可绑定到按钮点击事件）
       // translate.use('zh');
     }
   }
   

方案二：基于Angular原生i18n实现 #

如果你想使用Angular官方的原生国际化方案，步骤如下：

1. 配置原生i18n环境
   首先安装@angular/i18n依赖：

   npm install @angular/i18n --save
   

2. 标记需要翻译的文本
   修改HTML代码，给每个option添加i18n属性并设置唯一的翻译ID，同时移除translate管道：

   <select name="colCaseType" type="string" [(ngModel)]="colCaseType" #select4> 
     <option *ngFor="let level of caseType" [ngValue]="level.caseStatus" 
             i18n="@@caseStatus_{{level.caseStatus}}"> 
       {{level.caseStatus}}
     </option> 
   </select>
   

3. 提取翻译文件
   在项目根目录执行命令提取翻译源文件：

   ng xi18n --output-path src/locale
   

   这会在src/locale目录生成messages.xlf文件，你可以基于它创建对应语言的翻译文件，比如messages.zh.xlf，在其中添加对应翻译：

   <trans-unit id="caseStatus_OPEN" datatype="html">
     <source>OPEN</source>
     <target>打开</target>
   </trans-unit>
   <trans-unit id="caseStatus_CLOSED" datatype="html">
     <source>CLOSED</source>
     <target>关闭</target>
   </trans-unit>
   <trans-unit id="caseStatus_RISK ACCEPTED" datatype="html">
     <source>RISK ACCEPTED</source>
     <target>风险已接受</target>
   </trans-unit>
   <trans-unit id="caseStatus_ALL" datatype="html">
     <source>ALL</source>
     <target>全部</target>
   </trans-unit>
   

4. 配置本地化模块
   在AppModule中注册本地化数据并设置默认语言：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { LOCALE_ID } from '@angular/core';
   import { registerLocaleData } from '@angular/common';
   import localeZh from '@angular/common/locales/zh';
   import localeZhExtra from '@angular/common/locales/extra/zh';
   
   registerLocaleData(localeZh, 'zh-CN', localeZhExtra);
   
   @NgModule({
     imports: [BrowserModule],
     providers: [
       { provide: LOCALE_ID, useValue: 'zh-CN' } // 设置默认语言为中文
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

5. 构建多语言版本
   在angular.json中配置多语言构建选项，然后通过命令构建对应语言的包：

   ng build --prod --i18n-file=src/locale/messages.zh.xlf --i18n-format=xlf --locale=zh-CN
   

注意事项 #

• 不要混合使用ngx-translate和Angular原生i18n，两者的实现逻辑完全不同，混用会导致翻译失效或冲突。
• Angular 5的原生i18n不支持前端动态切换语言（需要构建不同的语言包），如果需要动态切换功能，推荐使用ngx-translate方案。

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