เพิ่มการสนับสนุนหลายภาษาให้เป็นเชิงมุม

ในการกวดวิชานี้เราจะพาคุณไปสู่กระบวนการทำให้แอปของคุณสามารถเข้าถึงได้และเป็นมิตรกับผู้ใช้สำหรับผู้คนทั่วโลก เพียงประมาณร้อยละ 20 ของโลกพูดภาษาอังกฤษดังนั้นการให้ตัวเลือกภาษาอื่น ๆ สามารถปรับปรุงประสบการณ์การใช้งานของคุณและเพิ่มการเข้าถึงแอปของคุณอย่างมาก เรากำลังจะดูเครื่องมือสากลในตัวในตัวของเชิงมุมและแสดงวิธีการใช้งานอย่างถูกต้อง

หากคุณกำลังสร้างเว็บไซต์มากกว่าแอปให้แน่ใจว่าคุณมีชุดเครื่องมือของคุณ ดูคำแนะนำของเราที่ดีที่สุด สร้างเว็บไซต์ และด้านบน เว็บโฮสติ้ง เพื่อหาข้อมูลเพิ่มเติม

เราได้สร้างแอปสาธิตที่ง่ายมากเพื่อแสดงให้เห็นถึงกระบวนการ โคลนมันจากที่นี่ จากนั้นทำตามคำแนะนำในการติดตั้ง

เริ่มแอปเพื่อทำความคุ้นเคยกับมัน มันแสดงและอัปเดตตัวเลขและค่าสุ่มด้วยบริบทที่แตกต่างกันเช่น สกุลเงินวันที่ ฯลฯ เราจะครอบคลุมบางส่วนของท่อและคุณสมบัติที่ใช้ในระหว่างการกวดวิชา

• 17 บทช่วยสอนการออกแบบที่ตอบสนองที่มีประโยชน์จริงๆ

01. ข้อกำหนดสำคัญสำหรับการสนับสนุนภาษา

มีสองคำที่มักใช้แทนกันเมื่อพูดคุยเกี่ยวกับการแปลแอพ - สากลและการแปล - อย่างไรก็ตามพวกเขาหมายถึงสิ่งที่แตกต่างกันเล็กน้อย การทำให้เป็นสากลหมายถึงกระบวนการเตรียมแอปของคุณเพื่อรองรับภาษาต่าง ๆ ในทางตรงกันข้ามการแปลแปลหมายถึงกระบวนการแปลแอปของคุณเป็นภาษาที่คุณต้องการ โดยพื้นฐานแล้วเป็นสากลเป็นสิ่งที่คุณทำหนึ่งครั้งต่อแอปและการแปลเป็นภาษาท้องถิ่นเกิดขึ้นหนึ่งครั้งต่อสถานที่ - อย่างน้อยก็คือแผน

เงื่อนไขเหล่านี้อาจคุ้นเคยกับรุ่นที่สั้นลงของพวกเขา: I18N (โดยที่ 18 คือจำนวนตัวอักษรระหว่าง 'i' แรก 'และสุดท้ายของสากล) และ L10N (โดยที่ 10 คือจำนวนตัวอักษรระหว่าง' i ' และ 'n' ของการแปล)

02. การแปลคืออะไร

มีมากกว่า 6,000 ภาษาที่ใช้ทั่วโลกในปัจจุบันซึ่งส่วนใหญ่ใช้โดยคนกลุ่มเล็ก ๆ เท่านั้น ถึงกระนั้นแม้ว่าเราจะมุ่งเน้นไปที่สามภาษาสูงสุดเท่านั้น - แมนดารินสเปนและภาษาอังกฤษ - จะมีความแตกต่างอย่างมีนัยสำคัญในการจัดรูปแบบวันที่โครงสร้างไวยากรณ์การจัดรูปแบบและการจัดรูปแบบหมายเลข

หากเรารวมภาษาที่ใช้กันอย่างแพร่หลายในห้า - ภาษาอาหรับ - เราพบความแตกต่างอีกครั้ง ภาษาอาหรับเป็นสคริปต์ที่ถูกต้องไปทางซ้าย (RTL) ซึ่งหมายความว่า UI จะต้องทำมิร์เรอร์

ดังนั้นในระหว่างการแปลเราต้องพิจารณาไวยากรณ์เค้าโครงและการจัดรูปแบบแตกต่างกันและแน่นอนว่าเราต้องเปลี่ยนข้อความเอง เชิงมุมสามารถช่วยได้มาก แต่คุณจะต้องแปลข้อความด้วยตนเอง (และบันทึกการแปลใน การจัดเก็บเมฆ ดังนั้นจึงปลอดภัยและแบ่งปันกับทีมของคุณได้อย่างปลอดภัย)

03. locales ในเชิงมุม

เราจะต้องมีการ จำกัด สำหรับแต่ละโลแคลที่เราต้องการให้การสนับสนุน โลแคลหมายถึงชุดทั่วไปของการตั้งค่าสำหรับการพิจารณาที่กล่าวถึงข้างต้นที่มีแนวโน้มที่จะแบ่งปันภายในภูมิภาคของโลกโดยทั่วไปแล้วเป็นประเทศ แต่ละโลแคลจะแสดงโดยตัวระบุ Locale Unicode ซึ่งระบุรหัสภาษาและส่วนขยายโลแคล

โลแคลเริ่มต้นของเชิงมุมคือ 'en-us' ซึ่งเป็นรหัสภาษา 'en' (ภาษาอังกฤษ) ตามที่พูดในภูมิภาค 'สหรัฐอเมริกา' (สหรัฐอเมริกา) แอปที่แปลว่า 'en-us' จะแตกต่างอย่างละเอียดจากแอพที่แปลว่า 'en-gb' ซึ่งเป็นภาษาอังกฤษที่พูดในบริเตนใหญ่ ตัวอย่างเช่นในวันที่ของสหรัฐคือ (งงงัน) ฟอร์แมต MM / DD / YYYY ในขณะที่ที่นี่ในสหราชอาณาจักรเราใช้วิธีการ DD / MM / YYYY ที่สมเหตุสมผลยิ่งขึ้น ความแตกต่างเล็กน้อยนี้อาจส่งผลให้เกิดข้อผิดพลาดที่สำคัญในความเข้าใจ

เพื่อให้สิ่งต่าง ๆ ที่น่าสนใจมาแปลแอปสาธิตของเราสำหรับภาษาอาหรับเป็นที่พูดในอิรักซึ่งเป็นที่รู้จัก 'AR-IQ' และภาษาอังกฤษตามที่พูดในสหราชอาณาจักร aka 'en-GB' เราจะใช้ภาษาอังกฤษเป็นค่าเริ่มต้นในครั้งนี้

04. สร้างการกำหนดค่า

โครงการสาธิตของเราถูกสร้างขึ้นโดยใช้ CLI เชิงมุมซึ่งรวมถึงเครื่องมือที่มีประโยชน์ เราจะใช้คอมไพเลอร์ล่วงหน้า (AOT) สำหรับโครงการนี้ดังนั้นเราจึงต้องทำการเปลี่ยนแปลงไฟล์การกำหนดค่าของ CLI: 'Angular.json' หากคุณต้องการใช้งานแบบทันเวลา (JIT) คุณต้องกำหนดค่าสิ่งต่าง ๆ ที่แตกต่างกันเล็กน้อย

ด้วย AOT สร้างคุณจะได้รับแอปพลิเคชั่นที่มีขนาดเล็กและใช้งานที่รวดเร็วยิ่งขึ้นซึ่งโหลดโดยไม่จำเป็นต้องมีคำขอแบบอะซิงโครนัสเพื่อดึงสิ่งต่าง ๆ เช่นเทมเพลตและสไตล์ชีท เป็นผลให้คุณต้องสร้างการสร้างสำหรับแต่ละโลแคลและให้บริการการสร้างที่เหมาะสมโดยใช้ URL หรือตรรกะการตรวจจับภาษาฝั่งเซิร์ฟเวอร์บางชนิด วิธีที่ง่ายที่สุดคือการสร้างไดเรกทอรีสำหรับแต่ละโลแคล, e.g www.example.com/en-gb และ www.example.com/ar-iq การแลกเปลี่ยนคือคุณไม่สามารถเปลี่ยนภาษาในทันที แต่ในความเป็นจริงที่ไม่น่าจะเป็นสิ่งที่ผู้ใช้จริงที่ต้องการ

ก่อนอื่นเราต้องเพิ่มการกำหนดค่าการสร้างสำหรับสถานที่ภาษาอาหรับของเรา ในไฟล์ JSON มองหาวัตถุ 'Architect.build.configurations' เพิ่มบล็อกต่อไปนี้เพื่อกำหนดการกำหนดค่าสำหรับโลแคล:

 "AR-IQ": {
    "Basehref": "/ AR-IQ /",
    "deployurl": "/ AR-IQ /",
    "เอาท์พุท": "Dist / Angular-I18N-Demo /
AR-IQ ",
    "i18nfile": "SRC / Locale / Messages.ar-IQ
xlf ",
    "i18nformat": "XLF"
    "i18nlocale": "AR-IQ" 

การกำหนดค่านี้จะบอกตำแหน่งเชิงมุมที่จะส่งผลงานสร้างที่รวบรวมและการแปลไฟล์และรูปแบบที่จะใช้ นอกจากนี้ยังตั้งค่าโลแคลและบอกมุมที่ไดเรกทอรีใดที่แอปจะถูกปรับใช้

นอกจากนี้เรายังต้องแก้ไขตัวเลือกเริ่มต้นใน 'Architect.build.Options' เพื่อใช้โลแคล 'EN-GB' ตั้งค่าคุณสมบัติต่อไปนี้ตามที่แสดง หมายเหตุเราเปิดใช้งาน AOT ที่นี่ทั่วกระดานเพื่อใช้ในการผลิตและพัฒนาสร้าง:

 "เอาท์พุท": "Dist / Angular-I18N-Demo /
en-gb ",
  "i18nlocale": "EN-GB"
  "deployurl": "/ en-gb /",
  "basehref": "/ en-gb /",
  "ทอท.": จริง 

เชิงมุมรองรับ Locales จำนวนหนึ่ง ตรวจสอบให้แน่ใจว่าคุณใช้ค่าที่ถูกต้องสำหรับคุณสมบัติ 'i18nlocale' คุณสามารถดูรายการที่สมบูรณ์ ที่นี่ .

เบื้องหลังการกำหนดค่าดังกล่าวข้างต้นเพียงแค่โหลดและอ่านจากหนึ่งในไฟล์การตั้งค่าโลแคลเหล่านี้

05. เสิร์ฟการกำหนดค่า

นอกเหนือจากการกำหนดค่าเอาต์พุต Build เรายังต้องตั้งค่าการกำหนดค่าสำหรับคำสั่ง 'NG Serve' สำหรับการพัฒนา นี่ตรงไปตรงมามากขึ้นเนื่องจากเราสามารถอ้างอิงการกำหนดค่าการสร้างที่เราเพิ่งเพิ่ม ใน 'Angular.json' เพิ่มบล็อกต่อไปนี้เป็น 'Architect.serve.configurations':

 "AR-IQ": {
    "Broweberrugarget": "Angular-i18n-
การสาธิต: สร้าง: AR-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

ที่นี่เรากำลังอ้างอิงตัวเลือกการกำหนดค่าสร้างโดยใช้คุณสมบัติ 'Broweberrarget' และเรายังตั้งค่า 'Servepath' ก่อนที่เราจะสามารถรับใช้หรือสร้างแอปภาษาอาหรับเราจำเป็นต้องสร้างไฟล์การแปลที่อ้างอิงในคุณสมบัติ 'i18nfile' ด้านบน CLI เชิงมุมประกอบด้วยเครื่องมือสำหรับการแยกข้อความที่ถูกตั้งค่าสถานะเป็นไฟล์แหล่งการแปลมาตรฐานอุตสาหกรรม

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

เราจะใช้คำสั่ง 'ng xi18n' ด้วยตัวเลือกต่อไปนี้ นี่เป็นครั้งเดียวที่เราจะรวมรหัส locale ในชื่อไฟล์ '- ไฟล์':

 $ ng xi18n - output-path locale - ไฟล์ - ไฟล์
messages.ar-iq.xlf --i18n-locale ar-iq 

สิ่งนี้ควรสร้างไฟล์ในไดเร็กทอรี SRC / Locale จากนี้ไปเราจะส่งออกไฟล์ชื่อ 'messages.xlf' และคัดลอกเวอร์ชันด้วยตนเองด้วยรหัสโลแคลในชื่อ เหตุผลนี้คือการป้องกันไม่ให้เครื่องมือสกัดจากการเขียนทับการแปลใด ๆ ที่เรามีอยู่ในไฟล์

06. การกำหนดค่าสวิทช์

ณ จุดนี้เราสามารถรวบรวมโครงการและดูว่าเกิดอะไรขึ้น แต่เราต้องบอกคำสั่ง 'ng เสิร์ฟ' ซึ่งการกำหนดค่าที่จะใช้ ก่อนอื่นให้ดูที่เวอร์ชั่นภาษาอังกฤษ ไม่มีการเปลี่ยนแปลงที่นี่เพราะภาษาอังกฤษเป็นค่าเริ่มต้น:

 $ NG ให้บริการ 

อย่างที่คุณเห็นดูเหมือนว่าเป็นรุ่นดั้งเดิมซึ่งใช้โลแคลเริ่มต้นของ 'en-us' เชิงมุม ความแตกต่างที่โดดเด่นคือสกุลเงินตอนนี้ระบุ US $ แทนเพียงแค่ $ โอเคตอนนี้ลองรุ่นภาษาอาหรับกันดีกว่า หยุดเวอร์ชันภาษาอังกฤษแล้วเรียกใช้:

 $ NG ให้บริการ --Configuration = AR-IQ 

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

07. เลนส์ตระหนักถึงสถานที่

ลองดูรหัสที่มาอย่างใกล้ชิด 'App.component.html' และคุณจะเห็นว่าเราใช้ท่อที่แตกต่างกันจำนวนมาก ท่อเชิงมุมต่อไปนี้เป็นที่รู้จักซึ่งหมายความว่าพวกเขาปรับเอาต์พุตของพวกเขาขึ้นอยู่กับตำแหน่งปัจจุบัน: 'Datepipe', 'currencypipe', 'decimalpipe' และ 'procentpipe'

หากคุณใช้ท่อเหล่านี้อย่างรอบคอบอย่างระมัดระวังจะจัดการกับการแปลเป็นจำนวนมากสำหรับคุณ โดยระมัดระวังเราหมายถึงใช้ตัวเลือกที่กำหนดไว้ล่วงหน้าที่มีอยู่ทุกที่ที่คุณสามารถทำได้ ตัวอย่างที่ดีคือการจัดรูปแบบวันที่ US VS UK ที่เรากล่าวถึงก่อนหน้านี้ หากคุณอยู่ในสหราชอาณาจักรและคุณต้องการแสดงวันที่โดยใช้รูปแบบวันต่อวัน (สมเหตุสมผล) คุณอาจผิดหวังในการค้นหาว่าตัวเลือกตัวเลือก '' สั้น ๆ '' ที่กำหนดไว้ล่วงหน้าเป็น M / D / YY (เช่น . 10/9/18) และถูกล่อลวงให้ฮาร์ดโค้ดรูปแบบที่คุณต้องการเช่นนี้:

 {{mydate | วันที่: 'DD / MM / Y'}} 

แต่ตอนนี้เรารู้แล้วว่าเราได้รับรูปแบบ M / D / YY เพราะเชิงมุมใช้โลแคล 'en-us' ตามค่าเริ่มต้น ดังนั้นแทนที่จะเป็นรูปแบบที่เราควรใช้ตัวเลือก '' shortdate '' และแปลแอปของเราเพื่อใช้ 'en-gb'

 {{mydate | วันที่: 'shortdate'}} 

ใช้ความพยายามมากขึ้นเล็กน้อย แต่จากนั้นเราสามารถเพิ่ม Locales ในเนื้อหาของหัวใจของเราและมีรูปแบบวันที่ที่ใช้งานง่ายเสมอ

08. overriding ตัวเลือกที่กำหนดไว้ล่วงหน้า

น่าเสียดายที่ดูเหมือนว่าจะมีวิธีที่ง่ายและอยู่ในตัวในการแทนที่รูปแบบที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่นคุณไม่สามารถตัดสินใจได้ว่าคุณต้องการรูปแบบ '' shortdate '' เพื่อเป็น DD / MM / YYYY แทน DD / MM / Y เนื่องจากไม่มีวิธีแก้ไขรูปแบบที่รันไทม์ นอกจากนี้คุณไม่สามารถเพิ่มตัวเลือกที่กำหนดไว้ล่วงหน้าของคุณเอง

สำหรับกรณีขอบเหล่านี้คุณสามารถสร้างท่อวันที่ที่กำหนดเองซึ่งล้อมรอบ 'Datepipe' เชิงมุมและจัดการกับรูปแบบที่กำหนดเองใด ๆ ต่อสถานที่ สิ่งที่ไม่รู้จักจะถูกส่งต่อไปยัง 'Datepipe' ในตัว

09. currencypipe

ปิดชั้นวาง 'currencypipe' จะจัดรูปแบบตัวเลขเป็นดอลลาร์สหรัฐตัดให้กับทศนิยมสองแห่งและเพิ่มการจัดกลุ่มตามที่กำหนดไว้ในการตั้งค่าของโลแคล

คุณจะสังเกตเห็นว่าทั้งในสถานที่ของเราเป็นสกุลเงินของเราเสมอในสกุลเงินดอลลาร์สหรัฐ มันไม่ได้เปลี่ยนเป็นสเตอร์ลิง (GBP) อย่างน่าอัศจรรย์เมื่อคุณใช้โลแคล 'EN-GB' เหตุผลนี้คือ£ 10 นั้นไม่เหมือนกับ $ 10 ดังนั้นคุณต้องระบุสกุลเงินที่หมายเลขของคุณอ้างถึงอย่างชัดเจน

ลองอัปเดต 'app.component.html' เพื่อใช้ GBP ตลอด เมื่อระบุรหัสสกุลเงินคุณต้องใช้ค่าที่ถูกต้องจากมาตรฐาน ISO 4217 (รายการออนไลน์ที่มีอยู่)

ปรับเปลี่ยนท่อสองสกุลเงินโดยการเพิ่ม ':' GBP '' เช่นเดียวกับ:

 {{value $ | async | สกุลเงิน: 'GBP'}} 

และคุณจะเริ่มเห็นสัญลักษณ์£แทน US $

จำไว้ว่ามันไม่ได้ทำอะไรที่ฉลาดเช่นแปลง USD เป็นค่าที่เทียบเท่าใน GBP โดยอัตโนมัติหากคุณเปลี่ยนสกุลเงิน - เพียงแค่เปลี่ยนสัญลักษณ์ที่ใช้

10. การแปลเวิร์กโฟลว์

โอเคดังนั้นเราจึงมีสอง Locales ที่กำหนดค่าและเชิงมุมของเราได้ทำหน้าที่ทำงานให้เราออกจากกล่องได้อย่างเป็นประโยชน์ แต่ข้อความทั้งหมดยังอยู่ในภาษาอังกฤษ เชิงมุมไม่สามารถแปลสิ่งนี้ได้โดยอัตโนมัติน่าเศร้า แต่มันสามารถช่วยเราได้ด้วยชิ้นส่วนของเวิร์กโฟลว์ นี่คือสิ่งที่ต้องเกิดขึ้น:

• ข้อความสถานะคงที่ในส่วนประกอบทั้งหมดสำหรับการแปล
• ส่งออกไฟล์แปลที่มีข้อความคงที่นี้
• ปรับเปลี่ยนไฟล์การแปลและเพิ่มการแปลที่เกี่ยวข้อง
• รวมไฟล์แปลแปลที่แปลเป็นแอป

เชิงมุมช่วยให้เรามีขั้นตอนที่ 2 และ 4 แต่ในฐานะนักพัฒนาเราต้องทำขั้นตอนที่ 1 ด้วยตนเอง ขั้นตอนที่ 3 มักจะแล้วเสร็จโดยผู้เชี่ยวชาญด้านการแปลหรือเอเจนซี่โดยใช้ซอฟต์แวร์พิเศษเพื่ออ่านและอัปเดตไฟล์การแปล

11. รายละเอียดแกน

เพื่อให้บรรลุเป้าหมายนี้เราต้องเพิ่มแอตทริบิวต์พิเศษให้กับทุกองค์ประกอบที่มีข้อความคงที่ที่จะแปล หากต้องการให้ชัดเจนหากเนื้อหามาจาก API นั้นไม่ได้แก้ไขข้อความและคุณต้อง จำกัด เฉพาะที่ใน API คุณต้องเพิ่มแอตทริบิวต์เมื่อเขียนข้อความโดยตรงในเทมเพลต HTML ในซอร์สโค้ดของคุณ จุดสำคัญที่นี่คือคุณควรพยายามเก็บไฟล์ typescript ของคุณ - ในคำอื่น ๆ ให้หลีกเลี่ยงการใส่ข้อความใด ๆ ที่ต้องทำการแปลในตรรกะส่วนประกอบและเก็บไว้ทั้งหมดในเทมเพลต มิฉะนั้นเครื่องมือสกัดจะไม่สามารถแยกได้ มันเป็นวิธีปฏิบัติที่ดีต่อไปเพื่อแยกความกังวลของคุณ - ในชีวิตและในรหัส

ลองเปิดขึ้น 'app.component.html' และเริ่มต้นด้วยชื่อ 'ค่าปัจจุบัน' เพียงเพิ่มแอตทริบิวต์ 'i18n' กับองค์ประกอบที่มีข้อความโดยตรง

 & lt; div class = "meta__title" i18n & gt;
     ค่าปัจจุบัน
   & lt; / div & gt; 

สิ่งสำคัญคือต้องเข้าใจว่านี่เป็นเพียงแอตทริบิวต์ที่กำหนดเอง 'ใบ้' มันไม่ใช่คำสั่งเชิงมุมที่ทริกเกอร์อะไรที่รันไทม์ในความเป็นจริงคอมไพเลอร์ลบมันหลังจากการแปล

อย่างไรก็ตามมาดูกันว่าเกิดอะไรขึ้นเมื่อเราเรียกใช้เครื่องมือสกัดอีกครั้งเพื่อสร้างไฟล์การแปล จำ '- ไฟล์ไฟล์' เป็นเพียง 'messages.xlf' ตอนนี้:

 $ ng xi18n - output-path locale - ไฟล์ - ไฟล์
messages.xlf --i18n-locale ar-iq 

เปิดไฟล์ XLF เอาต์พุตและคุณควรเห็นบล็อกหน่วยแปลใหม่ที่มีลักษณะเช่นนี้กับข้อมูลบริบทเพิ่มเติมบางอย่าง:

 & lt; id trans-it = "face3d45c0f0cd38b726e7798da15
3E2F8D55551 "DataType =" HTML "& GT;
    & lt; ที่มา & gt;
      ค่าปัจจุบัน
    & lt; / แหล่ง & gt; 

เยี่ยมมากนั่นหมายความว่าเครื่องมือหยิบแอตทริบิวต์ 'i18n' ขึ้นมา ID ที่ยาวถูกสร้างขึ้นโดยเครื่องมือและจะอยู่เหมือนกันเว้นแต่การเปลี่ยนแปลงข้อความ หากคุณมีหลายอินสแตนซ์ของข้อความเดียวกันทั้งหมดที่พวกเขาจะได้รับ ID เดียวกัน อย่าแก้ไข ID นี้!

หากคุณต้องการคุณสามารถระบุ ID ที่กำหนดเองภายในแอตทริบิวต์ 'i18n' หากคุณทำเช่นนี้ ID จะยังคงเหมือนเดิมแม้ว่าการเปลี่ยนแปลงข้อความดังนั้นคุณต้องแน่ใจว่าคุณไม่มีการชน ID ตลอดแอปของคุณ ใช้คำนำหน้า '@@' เพื่อตั้งค่ารหัสที่กำหนดเอง ที่นี่ ID จะกลายเป็น 'ชื่อ':

 & lt; div class = "meta__title" i18n = "@@ ชื่อเรื่อง" & gt;
     ค่าปัจจุบัน
   & lt; / div & gt; 

12. เพิ่มบริบทบางอย่าง

เพื่อให้แน่ใจว่านักแปลสามารถให้การแปลที่ถูกต้องพวกเขามักจะต้องรู้บริบทที่ข้อความถูกใช้ไปกับแอตทริบิวต์ 'i18n' ช่วยให้เราสามารถกำหนดคำอธิบายและความหมายเพื่อช่วยนักแปล รูปแบบมีดังนี้:

 & lt; div i18n = "ความหมาย | คำอธิบาย @@
CustomID "& GT; ข้อความ & lt; / div & gt; 

ลองอัปเดตชื่อของเราด้วยความหมายและคำอธิบาย:

 & lt; div class = "meta__title" i18n = "การ์ด
ชื่อเรื่องมูลค่าในช่วงเวลานี้ในเวลา @@ ชื่อเรื่อง "& gt;
     ค่าปัจจุบัน
   & lt; / div & gt; 

ที่ควรให้บริบทนักแปลเพียงพอที่จะให้การแปลที่ถูกต้อง สร้างไฟล์แปลใหม่และคุณควรเห็นค่าเหล่านี้ได้รับการส่งออก เป็นที่น่าสังเกตว่าหากคุณไม่ได้ใช้ ID ที่กำหนดเอง ID ที่สร้างขึ้นจะใช้ความหมายและข้อความเป็นบัญชี ดังนั้นข้อความเดียวกัน แต่มีความหมายที่แตกต่างกันจะได้รับ ID ที่แตกต่างกัน อย่างไรก็ตามคำอธิบายไม่มีผลกระทบต่อ ID

13. ข้อความที่มีตัวแปร

ไปที่ส่วนแนะนำกัน ย่อหน้าแรกมีข้อความและตัวแปรที่จะแก้ไขในรันไทม์ เราจะจัดการกับสิ่งนี้ได้อย่างไร

อย่างมีความสุขอย่างมีความสุขค่อนข้างตรงไปตรงมา อีกครั้งเราต้องเพิ่มแอตทริบิวต์ 'i18n' ที่มีความหมายให้กับองค์ประกอบที่มีองค์ประกอบ เพิ่มโดยตรงไปยังองค์ประกอบย่อหน้า:

 & lt; p i18n = "ปิดค่า | มูลค่าเมื่อตลาด
ปิดเมื่อวานนี้ @@ ปิดวงแหวน "& GT;
เรียกใช้เครื่องมือการสกัดอีกครั้งแล้วคุณจะเห็นหน่วยแปลใหม่นี้:
  & lt; รหัสหน่วยทรานส์ = "ปิดวงแหวน"
DataType = "HTML" & GT;
    & lt; ที่มา & gt; เมื่อวานนี้ & amp; apos; ค่าปิด;
& lt; x id = "การแก้ไข" equiv-text = "{{
ปิดวงแหวน สกุลเงิน: & amp; apos; gbp & amp; apos;
}} "/ & gt;. & lt; / แหล่งที่มา & gt; 

ดูว่าการแก้ไขตัวแปรได้รับรายละเอียดในเอาต์พุตอย่างไร สิ่งที่ดีเกี่ยวกับเรื่องนี้คือช่วยให้นักแปลสามารถปรับเปลี่ยนโครงสร้างไวยากรณ์ของประโยคได้หากจำเป็นโดยไม่ต้องมีผลผูกพัน ตัวอย่างเช่นอาจมีภาษาที่ประโยคที่จะเขียนได้ดีที่สุด: ค่า x คือการปิดเมื่อวานนั่นคือกับตัวแปรที่เริ่มต้น

14. การสลายตัว

การย้ายไปยังวรรคต่อไปที่คุณจะเห็นไวยากรณ์ที่ข่มขู่ สิ่งนี้เรียกว่ารูปแบบข้อความ ICU และช่วยให้คุณระบุชิ้นส่วนต่าง ๆ ของข้อความตามค่าของตัวแปร

คุณสามารถใช้สิ่งนี้เพื่อเพิ่มคำเป็นภาษาอังกฤษเมื่อค่าเป็นศูนย์หรือไม่หนึ่ง ตัวอย่างเช่นหาก 'วินาที' เป็นตัวแปรที่มีจำนวนวินาทีที่เราสามารถใช้นิพจน์การลงคะแนนของ ICU นี้:

 {{วินาที}} {วินาที, พหูพจน์, หนึ่ง
{ที่สอง}, อื่น ๆ {วินาที}} 

ซึ่งจะส่งออก:

• 0 วินาที
• 1 วินาที
• 2 วินาที

ดูเหมือนจะไม่ได้รับการบันทึกไว้ แต่คุณสามารถใช้ 'asyncpipe' ภายในไวยากรณ์แบบเร่ร่อนเพื่อทำงานกับ ObDerables

ในตัวอย่างนั้น 'หนึ่ง' และ 'อื่น ๆ ' เป็นหมวดหมู่ที่มีการเอาเปรียบ มีหลายหมวดหมู่ให้เลือก แต่ระวัง! ไม่ใช่ทุกคนที่สนับสนุนทุกหมวดหมู่และเชิงมุมไม่ได้บอกคุณว่าคุณพยายามใช้หมวดหมู่ที่ไม่รองรับที่โลแคลปัจจุบันหรือไม่ มันง่ายที่จะจบการคิดว่าคุณทำอะไรผิดไปเพราะหมวดหมู่ 'สอง' ไม่ทำงานในสถานที่ของคุณ 'EN-GB' ของคุณและคุณจะเห็นข้อความ 'อื่น ๆ ' อย่างลึกลับ 'en' (และภาษาทั่วไปอื่น ๆ อีกมากมาย) รองรับเพียง 'หนึ่ง' และ 'อื่น ๆ ' แม้ว่า 'ศูนย์' และ 'สอง' เป็นค่าที่ชัดเจน

ตรวจสอบไฟล์นี้ เพื่อดูว่ามีอะไรบ้างที่รองรับจริง

15. ชาร์ตบาร์เรเดียลหลายแห่ง

เราสามารถแก้ไขข้อ จำกัด นี้ได้โดยใช้ตัวเลขแทนหมวดหมู่ เพียงใช้คำนำหน้าค่าด้วย '=':

 ที่นั่น {ผู้เฝ้าดูพหูพจน์ = 0 {ไม่มีใคร} = 1
{เป็นหนึ่งคน} = 2 {เป็นสองคน}
    อื่น ๆ {คือ {{watchers}}}}
ดูตอนนี้ 

นี่คือการตั้งค่าในแอปสาธิตเราเพียงแค่ต้องเพิ่มแอตทริบิวต์ 'i18n' ไปยังวรรคที่มี: