कोणीय में बहुभाषी ऐप्स

इस लेख में, हम इस बात पर विचार करेंगे कि आप अपनी कोणीय परियोजना को बहुभाषी संचालन में कैसे स्थानांतरित कर सकते हैं और इसके लिए क्या उपयोगिताएँ हैं।

Ngx- अनुवाद का उपयोग बंद करो!

मैं मिलने वाली अधिकांश परियोजनाओं को इस पुस्तकालय का उपयोग करते हुए लिखा गया था, और आश्चर्यजनक रूप से नहीं, यह बहुत सरल है, और कोणीय की आधिकारिक रिलीज से पहले दिखाई दिया।

मानक i18n का उपयोग करें!

अपने प्रोजेक्ट में जोड़ना जितना आसान लगता है, उससे कहीं ज्यादा आसान है।

और इसलिए, यहाँ एक छोटा निर्देश है:

• टेम्पलेट तत्व में i18n विशेषता जोड़ें
• तत्व i18n का उपयोग करें- तत्व की विशेषताओं का स्वयं अनुवाद करने के लिए
• ICU एक्सप्रेशन का उपयोग करें
• पाइप के लिए वांछित स्थान रजिस्टर करें

हम 5 मिनट में हैलो-वर्ल्ड ऐप का अनुवाद करते हैं:

इस उदाहरण में, हम शीर्षक विशेषता और सामग्री को स्वयं निर्दिष्ट करेंगे।

<div i18n i18n-title title="">  {{name}}! </div> 

हम अपने अनुवादक के लिए एक विवरण भी सेट कर सकते हैं

 <div i18n="   ">  {{name}}! </div> 

और निश्चित रूप से, ग्रंथों को दोहराने के लिए हम पहचानकर्ताओं को निर्दिष्ट कर सकते हैं:

 <span i18n="@@HiId">!</span> 

हम एक विवरण के साथ पहचानकर्ताओं को भी जोड़ सकते हैं:

 <span i18n="  |@@HiId">!</span> 

हम आईसीयू अभिव्यक्ति को उजागर करते हैं जहां हमें इसकी आवश्यकता थी:

 <span i18n>  { orders, plural, =0 {} =1 { } other {<b>{{orders}}</b>} } <span> 

इस उदाहरण में, यह एक नियमित स्विच-केस की तरह काम करता है। लेकिन विभिन्न उपयोग के मामले हैं।

लगभग सब कुछ तैयार है!

कोणीय CLI कमांड चलाएँ:

ng xi18n

डिफ़ॉल्ट रूप से, यह XLIFF प्रारूप में messages.xlf फ़ाइल एकत्र करेगा। यह आगे काम करने के लिए पर्याप्त है।

इस फाइल को मैसेज में कॉपी करें ।fr.xlf (मान लें कि हम फ्रेंच में अनुवाद चाहते हैं)।

हम अनुवाद के लिए फ़ाइल देते हैं, सौभाग्य से यह प्रारूप बहुत आम है, और इसके लिए बहुत सारी उपयोगिताओं हैं ताकि अनुवादक को संपादित करने में आसानी हो।

खैर, अब हम angular.json configs को संपादित करते हैं:

 "configurations": { ... "fr": { "outputPath": "dist/my-project-fr/", //    "i18nFile": "src/locale/messages.fr.xlf", //    "i18nFormat": "xlf", //   "i18nLocale": "fr", //   ... } } 

वह सब है!

> ng serve - configuration=fr
> ng build - configuration=fr

अब विचार करें कि यह अंदर से कैसे काम करता है:

यह आरेख से देखा जा सकता है कि गतिशीलता बस संभव नहीं है, यही कारण है कि मानक i18n वर्तमान में व्यवस्थित है। और भाषा के किसी भी बदलाव के लिए एक नया बंडल डाउनलोड करना होगा।

वास्तव में, बहुभाषावाद से संबंधित अधिकांश मामलों के लिए, एक वक्ता की आवश्यकता नहीं होती है। ज्यादातर अक्सर यह एक पूरी तरह से अलग स्थानीयकरण है। बस अपने आप से पूछें, क्या आपके उपयोगकर्ता अक्सर भाषाओं को स्विच करते हैं? लेकिन क्या होगा अगर आपको अपने आवेदन का अरबी में अनुवाद करने की आवश्यकता है? आप डब्ल्यू 3 सी वेबसाइट पर विस्तृत सिफारिशें पढ़ सकते हैं।

एक कोणीय के लिए विभिन्न i18n विकल्पों की तुलना करने वाली तालिका में लिंक नहीं डाला जा सकता है ।

डायनामिक्स के प्रेमियों के लिए, अच्छी खबर है, साथ में आइवी रैनटाइम सर्विस दिखाई देगी।

i18n और आइवी

तो यह क्या देगा?

• इसका उपयोग हर जगह किया जा सकता है (प्रतिक्रिया, Vue), उदाहरण के लिए, कोणीय तत्वों के माध्यम से
• ट्री-shakeable
• आलसी-लोडिंग समर्थन
• विभिन्न स्थानों के लिए समर्थन
• संकलन के बिना पूर्ण कार्यक्षमता

खैर, चूंकि बहुत अधिक उपयोगिताओं कभी नहीं होती हैं, विशेष रूप से जीवन को आसान बनाने के लिए, मैंने जल्दी समाप्त होने वाले बहुभाषी मोड पर स्विच करने के लिए एक छोटी उपयोगिता बनाई है:

 > npx ngx-translate-all --format ngx-translate | i18n --in ru --out en,fr --outPath src/assets/i18n 

यह 2 प्रारूप का समर्थन करता है, दोनों मानक i18n और ngx-Translate-all।
मानक i18n के लिए, उपयोगिता आवश्यक विशेषताओं की व्यवस्था करेगी और वांछित विवरण जोड़ देगी।

 --format i18n <div i18n="AppModule.AppComponent"> ! </div> 

एनएक्सएक्स-ट्रांसलेशन के लिए, यह चर को असाइन करेगा, पाइप डाल देगा, और उन्हें वांछित जस्सन फ़ाइल में निर्यात करेगा।

 --format ngx-translate <div> {{AppModule.AppComponent[0] | translate}} <div> 

और मैं यह भी चाहता हूं कि आप अपनी परियोजनाओं को मानक i18n में स्थानांतरित करें, कम से कम टेम्पलेट्स में। और जल्द ही मैं एक विशेष उपयोगिता प्रकाशित करूंगा जो स्वचालित रूप से आपके प्रोजेक्ट को एनएक्सएक्स-ट्रांसलेट से i18n तक स्थानांतरित कर देगा

 > npx ngx-translate-migrate ngx-translate -> i18n 

प्रोजेक्ट का अनुसरण करने के लिए, आप मेरे ट्विटर, जीथब या टेलीग्राम चैनल को कोणीय को समर्पित कर सकते हैं:

https://twitter.com/irustm
https://t.me/ngFanatic
https://github.com/irustm

यदि आपके पास अभी भी प्रश्न हैं, तो मैं आपको लाइव वीडियो पॉडकास्ट ngRuAir में आमंत्रित करता हूं:

7 अप्रैल, 2019 20.00 मास्को समय विषय: कोणीय पर बहुभाषी अनुप्रयोगों का विकास।