LibsUiTranslateService

Dịch vụ quản lý đa ngôn ngữ (i18n) cho project, mở rộng từ @ngx-translate/core với các tính năng đặc thù:

• Tích hợp MessageFormat: Hỗ trợ plural rules, select statements phức tạp.
• Global Interpolation: Biến {value} dùng chung không cần truyền thủ công.
• Merge từ source: Tự động merge chuỗi dịch nội bộ(data-translation.ts) khi gọi use().
• Lưu ngôn ngữ: Tích hợp UtilsCache để lưu lựa chọn ngôn ngữ vào localStorage.

Cài đặt

// app.config.ts
import { getConfigTranslate } from '@libs-ui/services-translate';

export const appConfig: ApplicationConfig = {
  providers: [
    getConfigTranslate(), // Load từ /i18n/*.json
    getConfigTranslate('/assets/translations/'), // Đường dẫn tùy chỉnh
  ],
};

Cấu trúc file ngôn ngữ

Đặt các file JSON tại public/i18n/ (hoặc đường dẫn tùy chỉnh truyền vào getConfigTranslate):

public/
└── i18n/
    ├── vi.json
    └── en.json

Ví dụ vi.json:

{
  "i18n_hello": "Xin chào",
  "i18n_greeting": "Xin chào, {name}!",
  "i18n_item_count": "{value} {value,plural, =0 {mục} =1 {mục} other {mục}}"
}

Inject translation từ Object (không cần file .json)

Phù hợp khi muốn đặt translation trực tiếp trong code (ví dụ: cho các key của thư viện dùng chung):

import { TranslateService } from '@ngx-translate/core';

constructor() {
  this.translate.setTranslation('vi', {
    i18n_welcome: 'Chào mừng đến với hệ thống',
    i18n_role: 'Vai trò: {role}',
  }, true); // true = merge, không ghi đè keys từ file JSON

  this.translate.setTranslation('en', {
    i18n_welcome: 'Welcome to the system',
    i18n_role: 'Role: {role}',
  }, true);

  this.translate.use('vi');
}

Sử dụng trong Template

<!-- Dùng pipe -->
<span>{{ 'i18n_search' | translate }}</span>

<!-- Có interpolation params -->
<span>{{ 'i18n_greeting' | translate: { name: 'Admin' } }}</span>

<!-- Plural (MessageFormat) -->
<span>{{ 'i18n_item_count' | translate: { value: 5 } }}</span>

Sử dụng trong Component

import { TranslateService } from '@ngx-translate/core';

export class MyComponent {
  private translate = inject(TranslateService);

  // Sync
  get label() {
    return this.translate.instant('i18n_search');
  }

  // Async (reactive)
  label$ = this.translate.get('i18n_search');

  // Chuyển ngôn ngữ
  switchLang(lang: string) {
    this.translate.use(lang);
  }
}

Global Interpolation

Dùng để inject biến dùng chung (tên thương hiệu, hotline...) vào tất cả chuỗi dịch:

import { setInterpolateParamDefault } from '@libs-ui/services-translate';

// Thường đặt ở app.component.ts
setInterpolateParamDefault({
  brand: 'Mobio CRM',
  hotline: '1900 1234',
});

Trong file dịch:

{
  "i18n_contact": "Liên hệ {brand} qua hotline {hotline}"
}

Kết quả: "Liên hệ Mobio CRM qua hotline 1900 1234" — không cần | translate: { brand: '...', hotline: '...' }.

MessageFormat — Plural & Select

{
  "i18n_items": "{value} {value,plural, =0 {mục} =1 {mục} other {mục}}",
  "i18n_status": "Trạng thái: {status,select, active {Hoạt động} inactive {Không hoạt động} other {Không xác định}}"
}

Demo

Xem chi tiết và test interactive tại: http://localhost:4500/services/translate