Angular12和WebApi多语言使用
2022-04-07 20:55
1281 查看
1.安装ngx-translate
运行下面命令安装@ngx-translate/core和@ngx-translate/http-loader:
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader –save2.配置多语言
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 style="color: red;"> </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); } }
相关文章推荐
- 一起talk C栗子吧(第九十八回:C语言实例--使用消息队列进行进程间通信二)
- 使用Sublime 2 配置GoLang语言
- Java语言使用数组实现栈
- webApi文档好帮手-apidoc使用教程
- 使用Java语言开发微信公众平台(三)——被关注回复与关键词回复
- xpath语言使用
- java语言基础(92)——使用Lock锁实现线程安全
- Go语言中Map的基本使用
- 黑马程序员——OC语言日志——NSArray的介绍和使用
- 转载:在PHP语言中使用JSON和将json还原成数组
- Java 语言中 Enum 类型的使用介绍
- 使用Python和C#对比跨语言压缩算法库LZ4, Snappy, LZO, gzip, glib
- Velocity模板引擎的介绍和基本的模板语言语法使用
- C语言 select函数使用
- 使用 ASM 实现 Java 语言的“多重继承”
- 使用C#语言跨平台开发iOS 应用程序
- 使用ajax来进行前后传送数据(django框架、Python语言)
- python语言基础,UI自动化-selenium的使用
- 如何使用c#语言来调用MapX
- delphi多语言MultiLanguage支持,Translation Manager详细使用方法