วิธีการทำให้ Angular7 แสดงผลหลายภาษา
การพัฒนา web application ในปัจจุบันโดยเฉพาะ enterprise software มักจะได้รับ requirement ให้รองรับการแสดงผลมากกว่า 1 ภาษา ซึ่งตัว angular นั้นมีการทำมากกว่า 1 ภาษามาให้อยู่แล้วด้วยวิธีการทำ i18n สามารถดูได้ตาม link นี้นะครับซึ่งทางผมเองเคยนำมาใช้แล้วรู้สึกไม่ชอบตัว translate ที่ต้องทำใน file xlf ซึ่งอยู่ใน xml format ก็เลยลองหาตัวอื่นมาใช้แทนซึ่งก็คือ ngx-translate โดยสาเหตุที่เลือกให้ตัวนี้คือ ตัว file ที่เอามาใช้สำหรับเป็น translate เป็น json file ดูเรียบง่ายกว่า อีกทั้งยังมี service ให้สามารถสั่งเปลี่ยนภาษาได้เลย
ขั้นแรกติดตั้ง lib กันครับด้วยคำสั่งดังนี้
npm install @ngx-translate/core --saveในกรณีที่ไม่ได้ใช้ angular 7 ต้องเลือกลงให้ถูกกับ version ของ angular ที่เราใช้นะครับโดยดูได้จากตารางนี้นะครับ
หลังจากติดตั้ง lib เข้าไปใน project เราแล้ว เราจำเป็นที่จะต้องเรียกใช้ lib ของเราโดยการ import lib เข้าไปที่ app.module.ts ดังนี้
ขั้นต่อมาจะต้องทำการติดตั้งตัว lib อีกตัวเพื่อใช้ในการ load translate file ของเราโดยวิธีการ load มีหลายวิธีแต่ในบทความนี้เลือกให้วิธีการ load ผ่าน http เขามา
npm install @ngx-translate/http-loader --saveขั้นต่อมาให้ทำการสร้าง folder ชื่อ i18n ภายใต้ folder assets โดย file translate เราจะเก็บไว้ใน folder นี้ โดยชื่อ file จะเป็นรหัสภาษาที่เราต้องการเช่น application เรามี 2 ภาษาคือ thai, english เราก็สร้าง file ชื่อ en.json, th.json เอาไว้ภายใน folder นี้ดังภาพ
ขั้นต่อมาก็ทำการเรียกใช้ loader ใน app.module.ts ดังนี้
ขั้นต่อมาจะเป็นการเรียกใช้ใน application เราดังนี้
จากภาพตัวอย่างอธิบาย code ดังนี้ส่วนที่เป็นลูกศรสีนำ้เงินคือส่วนที่ import เข้ามาและตั้งค่าเพื่อบอก application ให้รับรู้ว่า default lang ของ application เราคือภาษาอะไรในวงเล็บจะเห็นว่าเป็น en ตัว ngx-translate ก็จะไปหา file /assets/i18n/en.json มาใช้
ส่วนลูกศรสีเขียวคือการที่เราจะทำการ switch ภาษาเราสามารถสั่งให้เปลี่ยนภาษาได้โดยผ่าน service TranslateSevice ได้เลย (ในที่นี้แนะนำว่าให้ทำเป็นปุ่ม switch language เป็น component เอาไว้เรียกใช้นะครับ)
ส่วนขีดเส้นใต้สีชมพูคือการบอกว่าต้องการแปลภาษาโดยวิธีนี้คือการเรียกผ่าน pipe ที่ชื่อว่า translate โดย pipe นี้สามารถรับ parameter ได้โดย วิธีการทำงานก็คือมันจะไปหา key ชื่อ HELLO ใน file en.json โดยใน file เราจะมีข้อมูลดังนี้
{"HELLO": "hello {{value}}"}
ในการ translate นั่นเราสามารถส่ง parameter เข้ามาได้โดยค่าที่ส่งเข้ามาจะแสดงผลใน {{value}} โดย value คือชื่อตัวแปรที่เราส่งมา ดังตัวอย่าง
<div>{{ 'HELLO' | translate:{value:'world'} }}</div>เรายังสามารถเรียกใช้ translate ผ่าน directive ได้ดังนี้
<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>หรือ<div translate [translateParams]="{value: 'world'}">HELLO</div>
ในกรณีที่ต้องการดึงข้อมูลมาแสดงผลใน alert หรือ warning ต่างๆ ผ่านการเขียนโปรแกรม สามารถทำได้ด้วยดังนี้
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {alert(res);});
ในตัว ngx-translate เท่าที่ใช้มาในหลายโปรเจ็ค โดยรวมแล้วดีใช้งานง่ายและค่อนข้างเร็วมาก สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolutionหรือ web site : www.pnpsw.comได้ครับ
