إرشادات عملية خطوة بخطوة حول كيفية ربط التعريب الديناميكي (القدرة على اختيار اللغات) في تطبيق ويب Angular 4+ باستخدام @ ngx-translate / core .
من حيث المبدأ ، يمكنك العثور على منشورات حول موضوع مشابه ، قد تكون وثائق هذه المكتبة كافية ، لكنني أردت تنظيم هذه التعليمات من أجل تطبيق أكثر ملاءمة. هذه الإشارة المرجعية موجودة في البنك الخنزير لمطور مبتكر زاوي. في نهاية المقال ، يوجد رابط لمستودع مفتوح مع مثال.
لماذا بالضبط ترجمة NGX
أريد أن أبدي تحفظًا على الفور ، هذا إرشادات لاستخدام مكتبة محددة. لن نتحدث عن البدائل ، أن الزاوي لديه توطين i18n الخاص به. إذا فقط لأنه مع تغيير ديناميكي للغة هناك أسئلة.
ماذا نحصل على الخروج
- تطبيق الزاوي ، في مجلد
assets/locale هناك ملفات *.json مع مفاتيح وقيمها المترجمة ، ملف واحد لكل لغة معتمدة في تطبيق الويب. - تغيير اللغة الديناميكية
- تخزين المفاتيح في بنية كائن ، أي ، يحتوي على شيء مثل هذا:
// en.json { Common: { Yes: "Yes" } }
سيسمح لك ذلك بتجميع المفاتيح / القيم وتنظيم ملف json بطريقة ما مع الترجمة. بالنسبة للمشاريع الكبيرة ، من المفيد للغاية.
- الحد الأدنى من الأتمتة والتحقق من خداع. ماذا لو نسيت أن أضيف المفتاح في json؟
- تطبيق الترجمة سواء في قوالب HTML أو في كود الملخص الفني
تخصيص
نخلق أو نأخذ مشروع الزاوي جاهزة. إصدار الزاوي 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
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 (وفقًا لما هو موضح في قائمة اللغات المتاحة). أضف بعض الحقول الأساسية بحيث تكون صالحة.
عند اتخاذ هذه الخطوات ، ستبدأ الخدمة في العمل.
نحن نستخدم الخدمة
ترميز HTML
كل شيء بسيط هنا. تقدم المكتبة translate نصية ، نطبقها فقط في الترميز لبعض المفاتيح.
<label>{{ 'LANGUAGES.TITLE' | translate }}</label>
لاحظ أنني أستخدم الخصائص المرفقة هنا ، وهي بنية json التي تحدثت عنها في البداية.
يتم دعم المعلمات أيضًا ، انظر إليها من فضلك في التوثيق @ ngx-translate / core . باستخدام المعلمات ، يمكنك تطبيق شيء مثل سلسلة الاستيفاء.
في رمز المكون
this.translateService.get(['KEY1', 'KEY2'])) .subscribe(translations => { console.log(translations['KEY1']) console.log(translations['KEY2']) });
هذه طريقة موثوق بها إذا كنت عاديًا مع Observable و RxJs.
إذا لم يكن كذلك ، فهناك طريقة:
this.translateService.instant('Key')
تعمل هذه الطريقة بشكل جيد ، ولكن في مرحلة تهيئة التطبيق (على سبيل المثال ، ngOnInit AppComponent) قد لا يتم تحميل البيانات الخاصة بها. كن حذرا.
دعم لملفات .json
في النهاية ، أريد أن ngx-translate-extract كيفية استخدام الأداة المساعدة ngx-translate-extract . فقط قم بتنفيذ الأمر ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json في وحدة التحكم. سيبدأ هذا الأمر في تحليل ملفات التطبيق وترميز رمز التوقيت. ستقع جميع المفاتيح الموجودة في الترميز والرمز الآخر في .json بالنسبة لجميع اللغات ، وستظل المفاتيح الحالية وقيمها دون تغيير ، باستثناء أن الترتيب قد يتغير.
للراحة ، أقوم بإضافة هذا كبرنامج نصي في package.json
"scripts": { "ng": "ng", "start": "ng serve", "update-locale": "ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json" },
يمكن العثور على كل ما وصفته معًا في مستودع مفتوح: valentinkononov / ngx-translate-angular
آمل أن تكون المادة مفيدة! اكتب الكود بكل سرور ، واختر مكتبات ملائمة واجعل مشاريع مفيدة!