有梦想的鱼
写代码我得再认真点,当我最终放下键盘时,我实在不想仍有太多疑惑
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.jsonzh-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;"> &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);
    }
}
posted on 2022-04-07 20:55  有梦想的鱼i  阅读(315)  评论(0编辑  收藏  举报