Angular Internationalization (i18n): รองรับหลายภาษา

i18n คืออะไร

Internationalization (i18n) คือการทำให้ app รองรับหลายภาษาและ locale เช่น ภาษาไทย, อังกฤษ, ญี่ปุ่น

วิธีที่ 1: Angular Built-in i18n

<!-- ใส่ i18n attribute -->
<h1 i18n="@@welcomeTitle">ยินดีต้อนรับ</h1>
<p i18n>กรุณาเข้าสู่ระบบ</p>

# Extract messages
ng extract-i18n --output-path src/locale

วิธีที่ 2: ngx-translate (แนะนำ)

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

// app.config.ts
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
        }
      })
    )
  ]
};

ไฟล์ภาษา

// assets/i18n/th.json
{
  "WELCOME": "ยินดีต้อนรับ",
  "LOGIN": "เข้าสู่ระบบ",
  "GREETING": "สวัสดี {{name}}"
}

ใช้ใน Template

<h1>{{ 'WELCOME' | translate }}</h1>
<p>{{ 'GREETING' | translate:{ name: username } }}</p>
<button>{{ 'LOGIN' | translate }}</button>

เปลี่ยนภาษา

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

export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('th');
    translate.use('th');
  }

  switchLanguage(lang: string) {
    this.translate.use(lang);
  }
}

สรุป

ngx-translate เป็นตัวเลือกที่ยืดหยุ่นกว่า built-in i18n เพราะเปลี่ยนภาษาได้ runtime โดยไม่ต้อง rebuild ครับ