डायनेमिक स्थानीयकरण (भाषाओं का चयन करने की क्षमता) को एंगुलर 4+ वेब एप्लिकेशन में @ ngx-Translate / core का उपयोग करके कैसे तेज किया जाए, इस पर एक व्यावहारिक कदम-दर-चरण निर्देश।

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

वास्तव में एनएक्सएक्स-ट्रांसलेशन क्यों

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

बाहर निकलने पर हमें क्या मिलता है

एंगुलर एप्लिकेशन, assets/locale फोल्डर में *.json फाइलें होती हैं जिनमें कुंजियाँ और उनके स्थानीय मान होते हैं, वेब एप्लिकेशन में प्रत्येक समर्थित भाषा के लिए एक फाइल।
गतिशील भाषा परिवर्तन
ऑब्जेक्ट संरचना में कुंजी जमा करना, अर्थात्, ऐसा कुछ है:

 // en.json { Common: { Yes: "Yes" } }

यह आपको समूह कुंजियों / मानों की अनुमति देगा और किसी तरह स्थानीयकरण के साथ एक json फ़ाइल का आयोजन करेगा। बड़ी परियोजनाओं के लिए यह काफी उपयोगी है।

न्यूनतम स्वचालन और एक मूर्ख के लिए जाँच। क्या होगा अगर आप json में कुंजी जोड़ना भूल गए?
Html टेम्पलेट और ts कोड दोनों में स्थानीयकरण का अनुप्रयोग

अनुकूलन

हम एक तैयार कोणीय परियोजना बनाते हैं या लेते हैं। कोणीय का संस्करण 4+ है, लेकिन यह जितना संभव हो उतना ताजा है।
आवश्यक पुस्तकालय स्थापित करें:

 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save @biesbjerg/ngx-translate-extract --saveDev

@ngx-translate/http-loader पुस्तकालय की आवश्यकता है ताकि हम *.json फ़ाइलों से स्थानीयकरण डेटा पढ़ सकें। आप इसके बिना रह सकते हैं, लेकिन फिर आपको स्थानीयकरण डेटा के भंडारण और लोडिंग को पूरी तरह से स्वतंत्र रूप से लिखना होगा। यह दृष्टिकोण उन लोगों के लिए उपयुक्त है जिनके पास स्थानीयकरण डेटा है (या बस सभी अनुवादित ग्रंथों) जो पहले से ही कहीं संग्रहीत हैं।

@biesbjerg/ngx-translate-extract पुस्तकालय वैकल्पिक है, लेकिन बहुत उपयोगी है। यह आपको एप्लिकेशन कोड द्वारा भूल गई स्थानीयकरण कुंजियों को एकत्र करने और स्थानीयकरण फ़ाइलों को अपडेट करने की अनुमति देता है। इस तरह के परिदृश्य को संसाधित करने के लिए इसका उपयोग करना बहुत सुविधाजनक है: एक नई भाषा जोड़ें और बस इस लाइब्रेरी से कमांड चलाएं। नतीजतन, नई भाषा के लिए खाली फ़ाइल कुंजियों की पूरी संरचना और कुछ डिफ़ॉल्ट मानों से भरी जाएगी। एक उदाहरण नीचे होगा।

मुख्य मॉड्यूल में पुस्तकालय आयात करें:

 @NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient], }, useDefaultLang: false, }) ], }) export class AppModule { }

HttpLoaderFactory पुस्तकालय HttpLoaderFactory में मौजूद है, इसे सीधे एक ही फाइल में वर्णित किया जा सकता है, यह आकार में मामूली है।

 export function HttpLoaderFactory(http: HttpClient): TranslateLoader { return new TranslateHttpLoader(http, './assets/locale/', '.json'); }

यह वह जगह है जहां हम स्थानीयकरण फ़ाइलों के लिए पथ को इंगित करते हैं। यदि वे किसी तरह अलग-अलग, या यहां तक कि अलग-अलग वातावरण में संग्रहीत किए जाते हैं - उदाहरण के लिए environment.ts का उपयोग करने के लिए इस कोड को बदलें।

सिद्धांत रूप में, यह मूल सेटिंग्स के लिए पर्याप्त है, लेकिन हम एक और अतिरिक्त कदम उठाएंगे - जब कुंजी नहीं मिली तो त्रुटि से निपटने।

ऐसा करने के लिए, कॉन्फ़िगरेशन में एक और फ़ील्ड जोड़ें (लोडर निर्दिष्ट करने के तुरंत बाद):

 missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MissingTranslationService },

और हां, आपको एक अलग फ़ाइल में इस हैंडलर के कार्यान्वयन को बनाने की आवश्यकता है:

 export class MissingTranslationService implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { return `WARN: '${params.key}' is missing in '${params.translateService.currentLang}' locale`; } }

उपलब्ध भाषाओं का संग्रहण जोड़ें। साधारण स्थिति में, उन्हें environment.ts में रखना सुविधाजनक environment.ts

 locales: ['en', 'ru'], defaultLocale: 'en',

सेवा शुरू करने के लिए, एप्लिकेशन लोड करते समय इसे AppComponent फ़ाइल में आरंभीकृत किया जाना चाहिए:

 @Component({...}) export class AppComponent implements OnInit { constructor(private translateService: TranslateService) {} ngOnInit(): void { this.translateService.use(environment.defaultLocale); } }

फ़ाइलें जोड़ें en.json और ru.json (उपलब्ध भाषाओं की सूची में जो संकेत दिया गया है उसके अनुसार)। कुछ आधार फ़ील्ड जोड़ें ताकि यह मान्य json हो।

जब ये कदम उठाए जाएंगे, तो सेवा काम करना शुरू कर देगी।

हम सेवा का उपयोग करते हैं

HTML मार्कअप

यहां सब कुछ सरल है। पुस्तकालय पाइप translate प्रदान करता है, हम इसे कुछ कुंजियों के लिए मार्कअप में लागू करते हैं।

 <label>{{ 'LANGUAGES.TITLE' | translate }}</label>

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

पैरामीटर भी समर्थित हैं, उन्हें दस्तावेज़ @ ngx-Translate / core में देखें । मापदंडों का उपयोग करके, आप स्ट्रिंग प्रक्षेप जैसे कुछ को लागू कर सकते हैं।

घटक कोड में

 this.translateService.get(['KEY1', 'KEY2'])) .subscribe(translations => { console.log(translations['KEY1']) console.log(translations['KEY2']) });

यह एक विश्वसनीय तरीका है अगर आप ऑब्जर्वेबल और आरएक्सजे के साथ सामान्य हैं।
यदि नहीं, तो एक तरीका है:

 this.translateService.instant('Key')

यह विधि अच्छी तरह से काम करती है, लेकिन एप्लिकेशन इनिशियलाइज़ेशन स्टेज पर (उदाहरण के लिए, ngOnInit AppComponent) इसके लिए डेटा अभी तक लोड नहीं किया जा सकता है। सावधान रहें।

.Json फ़ाइलों के लिए समर्थन

अंत में, मैं यह दिखाना चाहता हूं कि ngx-translate-extract उपयोगिता का उपयोग कैसे करें। बस कमांड ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json । कंसोल में ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json । यह कमांड एप्लिकेशन फाइलों, मार्कअप और टाइमपास कोड का विश्लेषण शुरू करेगा। मार्कअप और अन्य कोड में पाई गई सभी चाबियाँ। सभी भाषाओं के लिए .json में मौजूद होंगी, मौजूदा कुंजी और उनके मूल्य अछूते रहेंगे, सिवाय इसके कि ऑर्डर बदल सकता है।

सुविधा के लिए, मैं इसे पैकेज में एक स्क्रिप्ट के रूप में जोड़ रहा हूँ

 "scripts": { "ng": "ng", "start": "ng serve", "update-locale": "ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json" },

मेरे द्वारा वर्णित सब कुछ एक खुले भंडार में एक साथ इकट्ठा किया जा सकता है: वैलेंटिंकॉनोनोव / एनएक्सएक्स-ट्रांसलेशन-कोणीय

मुझे आशा है कि सामग्री उपयोगी होगी! आनंद के साथ कोड लिखें, सुविधाजनक लाइब्रेरी चुनें और उपयोगी प्रोजेक्ट बनाएं!

हम कोणीय आवेदन में एनएक्सएक्स-अनुवाद को जकड़ते हैं। प्रैक्टिकल वॉकथ्रू