1. Cài đặt thư viện ngx-translate

Thực hiện lệnh sau để cài đặt các gói cần thiết:

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

2. Thiết lập hệ thống ngôn ngữ

1. Tích hợp TranslateModule vào AppModule với cấu hình tùy chỉnh:

export function CustomLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/i18n/assets/', '.lng');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: CustomLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    { provide: NZ_I18N, useValue: en_US }
  ]
})

2. Tạo tập tin ngôn ngữ tại /src/assets/i18n với định dạng JSON:

/i18n/en-us.json
/i18n/vi-vn.json

3. Sử dụng dịch vụ TranslateService trong component:

constructor(private languageService: TranslateService) {}

async changeLanguage(locale: string) {
  await this.languageService.use(locale).toPromise();
}

3. Tùy chỉnh đường dẫn tài nguyên

1. Tạo lớp tải ngôn ngữ tùy chỉnh:

@Injectable()
export class LanguageLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    return this.http.get(`/lang/${lang}.json`, {
      headers: { 'Accept-Language': lang }
    });
  }
}

2. Cập nhật factory trong AppModule:

export function CustomLoaderFactory(http: HttpClient) {
  return new LanguageLoader(http);
}

4. Áp dụng đa ngôn ngữ

1. Trong component TypeScript:

constructor(private langService: TranslateService) {}

getTitle(): string {
  return this.langService.instant('page.title');
}

2. Trong template HTML:

<th class="table-header" [attr.lang]="'table.name' | translate">
  <span class="label">{{ 'table.name' | translate }}</span>
</th>

5. Triển khai đa ngôn ngữ cho Web API

1. Cấu hình header yêu cầu:

public class LocalizationHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken token)
    {
        var cultureHeader = request.Headers.GetValues("Accept-Language").FirstOrDefault();
        
        if (!string.IsNullOrEmpty(cultureHeader))
        {
            var culture = CultureInfo.CreateSpecificCulture(cultureHeader);
            Thread.CurrentThread.CurrentCulture = culture;
        }
        
        return await base.SendAsync(request, token);
    }
}

2. Tích hợp vào pipeline Web API:

config.MessageHandlers.Add(new LocalizationHandler());