Angular Academy · บทเรียน

การดึงและแปลข้อความ

สร้างและเติมข้อมูลในไฟล์แปลภาษา

บทเรียน 2 จาก 413 ขั้นตอน

การดึงและแปลข้อความ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

จากข้อความที่ทำเครื่องหมายสู่ไฟล์คำแปล

เมื่อทำเครื่องหมายข้อความด้วย i18n แล้ว Angular จะรวบรวมทุกข้อความลงในไฟล์ต้นฉบับคำแปล นักแปลจะเติมคำแปลสำหรับแต่ละภาษาเป้าหมาย และการสร้างแอปจะรวมคำแปลเหล่านั้นกลับเข้าไป บทเรียนนี้ครอบคลุมการดึงข้อความและรูปแบบไฟล์

การรัน ng extract-i18n

คำสั่ง CLI ng extract-i18n จะสแกนแอปเพื่อค้นหาข้อความที่ทำเครื่องหมายไว้ และเขียนไฟล์ต้นฉบับคำแปล (ค่าเริ่มต้นคือ messages.xlf)

ng extract-i18n
# generates messages.xlf in the project root

การเลือกรูปแบบและเส้นทางผลลัพธ์

คุณสามารถเลือกรูปแบบและปลายทางได้ โดย XLIFF (xlf) เป็นค่าเริ่มต้น นอกจากนี้ยังรองรับ XLIFF 2 และ arb ที่ใช้ JSON

ng extract-i18n --format=xlf2 --output-path=src/locale

โครงสร้างภายในไฟล์ XLF

ข้อความที่ทำเครื่องหมายแต่ละข้อความจะกลายเป็น trans-unit ซึ่งมี source (ข้อความต้นฉบับของคุณ) และ target ที่ว่างอยู่เพื่อให้นักแปลเติม

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

การสร้างไฟล์สำหรับแต่ละภาษา

คัดลอก messages.xlf เป็นไฟล์แยกสำหรับแต่ละภาษาปลายทาง ตั้งชื่อไฟล์ตามรหัสภาษา จากนั้นจึงแปลส่วนเป้าหมาย

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

การเติมคำแปล

นักแปลจะแทนที่ target ที่ว่างแต่ละรายการด้วยข้อความตามภาษา โดยคง id เดิมไว้เพื่อให้ Angular ทราบว่าตรงกับต้นฉบับใด

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

ต้องคงตัวยึดตำแหน่งไว้

การแทรกค่าจะปรากฏเป็นแท็กตัวยึดตำแหน่ง <x> นักแปลต้องคงแท็กเหล่านี้ไว้ แต่สามารถสลับลำดับให้เหมาะกับไวยากรณ์ของภาษาเป้าหมายได้

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

การดึงข้อความใหม่หลังการเปลี่ยนแปลง

เมื่อเพิ่มหรือเปลี่ยนข้อความที่ทำเครื่องหมายไว้ ให้รัน ng extract-i18n อีกครั้ง รหัสกำหนดเอง @@ จะรักษาคำแปลเดิมไว้ ส่วนรหัสที่สร้างโดยอัตโนมัติอาจเปลี่ยนและต้องแปลใหม่

การกำหนดค่าภาษาใน angular.json

ลงทะเบียนแต่ละภาษาและไฟล์คำแปลของภาษานั้นในส่วนการตั้งค่า i18n ของโครงการ เพื่อให้การสร้างแอปรู้ว่าจะค้นหาไฟล์เหล่านั้นได้จากที่ใด

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

การจัดการคำแปลที่หายไป

คุณสามารถกำหนดวิธีที่การสร้างแอปจะจัดการข้อความที่ยังไม่ได้แปลได้: error จะทำให้การสร้างแอปล้มเหลว warning จะบันทึกข้อความและใช้ข้อความต้นฉบับ ส่วน ignore จะไม่แสดงอะไร ใช้ error ใน CI เพื่อตรวจจับส่วนที่ขาดหาย

"options": { "i18nMissingTranslation": "error" }

การทำงานร่วมกับเครื่องมือแปล

XLIFF เป็นมาตรฐานอุตสาหกรรม ดังนั้นแพลตฟอร์มแปลภาษามืออาชีพและเครื่องมืออย่าง Crowdin หรือ Lokalise จึงสามารถนำเข้าไฟล์ที่ดึงออกมา และส่งออกคำแปลที่เสร็จแล้วกลับมาในรูปแบบเดิมได้

ตรวจสอบอย่างรวดเร็ว

ng extract-i18n สร้างอะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

รัน ng extract-i18n เพื่อรวบรวมข้อความที่ทำเครื่องหมายไว้ลงในไฟล์ต้นฉบับ XLIFF ซึ่งประกอบด้วย trans-unit คัดลอกไฟล์นี้สำหรับแต่ละภาษา เติม target โดยคงตัวยึดตำแหน่งไว้ ลงทะเบียนภาษาใน angular.json และตั้งค่า i18nMissingTranslation เพื่อตรวจจับส่วนที่ขาดหาย รหัส @@ ที่คงที่จะปกป้องคำแปลเมื่อมีการแก้ไข

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การดึงและแปลข้อความ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การดึงและแปลข้อความ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การดึงและแปลข้อความ”

สร้างและเติมข้อมูลในไฟล์แปลภาษา คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การดึงและแปลข้อความ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy