Angular12和WebApi多语言使用
<h6 id="1安装ngx-translate">1.安装ngx-translate</h6><p>运行下面命令安装@ngx-translate/core和@ngx-translate/http-loader：</p>
<pre><code class="language-npm">npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader –save
</code></pre>
<h6 id="2配置多语言">2.配置多语言</h6>
<p>1.在根模块app.module.ts下导入TranslateModule，并定义配置</p>
<pre><code class="language-ts">export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: ,
},
}),
],
providers: [
{ provide: NZ_I18N, useValue: en_US },
]
})
</code></pre>
<p>2.在./src/assets/i18n下创建多语言文件<code>en_US.json</code>和<code>zh-CN.json</code>，多语言的值是json形式展示</p>
<pre><code class="language-cmd">cd ./src/assets/i18n
ls en_US.json
ls zh-CN.json
</code></pre>
<p>3.注入<code>TranslateService</code>服务，并定义设置语言的函数,例如调用函数切换为英文<code>setLanguage('en_US')</code></p>
<pre><code class="language-ts">//注入多语言服务
constructor(private translate: TranslateService）{}
//设置语言
async setLanguage(lang: FrontEndLanguage) {
await this.translate.use(lang).toPromise();
}
</code></pre>
<h6 id="3设置自定义文件夹">3.设置自定义文件夹</h6>
<p>如果你想自定义多语言文件存放的路径，那就必须实现<code>TranslateLoader</code></p>
<p>1.继承<code>TranslateLoader</code>，实现方法</p>
<pre><code class="language-ts">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' } });
}
}
</code></pre>
<p>2.然后在app.module.ts下的<code>HttpLoaderFactory</code>中使用自定义的加载器</p>
<pre><code class="language-ts">export function HttpLoaderFactory(http: HttpClient) {
return new CustomTranslateHttpLoader(http);
}
</code></pre>
<h6 id="4多语言使用">4.多语言使用</h6>
<p>1.在后端ts获取多语言信息，首先注入<code>TranslateService</code>服务</p>
<pre><code class="language-ts">//注入多语言服务
constructor(private translate: TranslateService）{}
//获取多语言值
this.translate.instant(summary);
</code></pre>
<p>2.在html中给表格的列头添加多语言值，“th”:{"Name":'名称'}</p>
<pre><code class="language-ts"> <th nzAlign="center" nzWidth="20%"><span style="color: red;"> &nbsp;</span>{{"th.Name"|translate}}</th>
</code></pre>
<h6 id="5webapi实现多语言">5.WebAPI实现多语言</h6>
<p>首先为什么需要后端多语言，前端不是有了吗？主要针对一些特殊提示，只能后端返回的场景，如果你对Asp .net管道模型或者webAPI框架有足够深入，可以使用HttpModule或者根据你的业务需要，自己在框架上扩展都可以，此处使用DelegatingHandler在webAPI管道中拦截的方式实现，主要实现步骤如下：</p>
<p>1.首先需要客户端在请求头带上语言表示当前请求的语言类型,然后web项目中创建资源文件</p>
<p><img src="https://img2022.cnblogs.com/blog/1264751/202204/1264751-20220407162403611-1691493603.png" alt="" loading="lazy"></p>
<p>2.实现DelegatingHandler，以作为拦截输出</p>
<pre><code class="language-cs">public class CultureDelegatingHandler : DelegatingHandler
{
protectedoverride Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{
request.Headers.TryGetValues("culture", out IEnumerable<string> values);
if (values != null && values.Count() > 0)
{
stringlanguage =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);
}
}
</code></pre><br><br>
来源：https://www.cnblogs.com/yuxl01/p/16112946.html
頁:
[1]