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" nz  ><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);
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457555.html

標籤：其他

上一篇：淺拷貝

下一篇：在小程式當中渲染樹