angular ui（Angular12和WebApi多语言使用）

1.安装ngx-translate

运行下面命令安装@ngx-translate/core和@ngx-translate/http-loader：

npm install @ngx-translate/core --save npm install @ngx-translate/http-loader –save 2.配置多语言

1.在根模块app.module.ts下导入TranslateModule               ，并定义配置

export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, ./assets/i18n/, .json); } @NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient], }, }), ], providers: [ { provide: NZ_I18N, useValue: en_US }, ] })

2.在./src/assets/i18n下创建多语言文件en_US.json和zh-CN.json  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，多语言的值是json形式展示

cd ./src/assets/i18n ls en_US.json ls zh-CN.json

3.注入TranslateService服务














，并定义设置语言的函数,例如调用函数切换为英文setLanguage(en_US)

//注入多语言服务 constructor(private translate: TranslateService）{} //设置语言 async setLanguage(lang: FrontEndLanguage) { await this.translate.use(lang).toPromise(); } 3.设置自定义文件夹

如果你想自定义多语言文件存放的路径
  
  
  
  
  
  
  
 ，那就必须实现TranslateLoader

1.继承TranslateLoader  
  
  
  
  
  
  
 ，实现方法

export class CustomTranslateHttpLoader implements TranslateLoader { constructor(private http: HttpClient) { } getTranslation(lang: string) { const prefix = ./assets/language/; const suffix = .json; this.http.head return this.http.get(`${prefix}${lang}${suffix}`, { headers: { Content-Type: application/json;charset=utf-8 } }); } }

2.然后在app.module.ts下的HttpLoaderFactory中使用自定义的加载器

export function HttpLoaderFactory(http: HttpClient) { return new CustomTranslateHttpLoader(http); } 4.多语言使用

1.在后端ts获取多语言信息
 


 


 


 


 


 


 


 
，首先注入TranslateService服务

//注入多语言服务 constructor(private translate: TranslateService）{} //获取多语言值 this.translate.instant(summary);

2.在html中给表格的列头添加多语言值
 
 
 
 
 
 
 
，“th
  
  
  
  
  
  
  
 ”:{"Name":名称}

<th nzAlign="center" nzWidth="20%" ><span> &nbsp;</span>{{"th.Name"|translate}}</th> 5.WebAPI实现多语言

首先为什么需要后端多语言   
   
   
   
   
   
   
  ，前端不是有了吗？主要针对一些特殊提示
 

 

 

 

 

 

 

 
，只能后端返回的场景

 

 

 

 

 

 

 
，如果你对Asp .net管道模型或者webAPI框架有足够深入                ，可以使用HttpModule或者根据你的业务需要
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，自己在框架上扩展都可以














，此处使用DelegatingHandler在webAPI管道中拦截的方式实现                       ，主要实现步骤如下：

1.首先需要客户端在请求头带上语言表示当前请求的语言类型,然后web项目中创建资源文件

2.实现DelegatingHandler 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，以作为拦截输出

public class CultureDelegatingHandler : DelegatingHandler { protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { request.Headers.TryGetValues("culture", out IEnumerable<string> values); if (values != null && values.Count() > 0) { string language = values.FirstOrDefault().Replace(_, -); switch (language) { case "EN": language = "en_us"; break; case "ZH": language = "zh-CN"; break; } Thread.CurrentThread.CurrentCulture = Thread.CurrentThread.CurrentUICulture = CultureInfo.GetCultureInfo(language); } return base.SendAsync(request, cancellationToken); } }