كيفية تقسيم ملف i18n الخاص بك لكل وحدة محمولة كسول مع ترجمة ngx؟

ليرة تركية ، راجع قسم الملخص في النهاية

بعد بضعة أشهر من العمل على تطبيق Angular الخاص بي ، تحتوي ملفاتي i18n على أكثر من 800 سطر ، يكاد يكون من المستحيل صيانتها وسيصبح أكثر صعوبة مع مرور الوقت. أفضل حل لهذه المشكلة هو امتلاك ملف i18n واحد لكل وحدة (في الواقع 2 ، يجب أن أؤيد اللغة الفرنسية والإنجليزية).

بيئة:

@ الزاوي / النواة @ 4.4.3
@ NGX-ترجمة / النواة @ 8.0.0
@ NGX-ترجمة / HTTP محمل @ 2.0.0

المبدأ

لتكون قادرًا على تحميل ملف json مع وحدة محمولة كسولة ، يجب عليك استخدام الخاصية عزل كما تقترح الوثائق. سيسمح لك عزل TranslateModule بإنشاء مثيل جديد لـ TranslateService ، ومعه مثيل HttpLoader جديد مع مسار مختلف لملفات i18n.

الآن ، الفرق الأكبر الذي يجب أن تضعه في الاعتبار هو أنه عندما تقوم بتغيير اللغة ، يجب عليك تغييرها لجميع خدمات الترجمة. سيؤدي هذا إلى إخبار الخدمة بإحضار ملف json لكل وحدة نمطية محملة كسول باللغة التي تريدها.

في الكود الخاص بي ، استخدم Redux (ngrx-platform) لإبلاغ تغيير اللغة بين جميع الوحدات الخاصة بي.

طلبات متعددة؟

ملاحظة: عليك أن تضع ذلك في الاعتبار: سيؤدي هذا إلى زيادة كبيرة في مقدار الطلب المقدم إلى الخادم الخاص بك! إذا كان لديك 10 وحدات ، فهناك 10 طلبات فقط للترجمات!

لكن في عام 2017 ، لم تعد هذه مشكلة ...

  • استخدام المتشعب 2
  • استخدم sw-precache من Google لإنشاء ملف بيان
  • استخدم Idle-Preload كاستراتيجية تحميل كسولة
  • استخدم العرض من جانب الخادم إذا كنت لا تزال غير سعيد

يجب أن يكون التأثير على أدائك ضئيلاً.

هيكل المجلد

يبدو مجلد الأصول الخاص بي لملفات i18n كما يلي:

الأصول/
└── i18n /
   / التطبيق /
   ├── ├── en.json
   │ └── fr.json
   └── المنزل /
       ├── en.json
       └── الاب

يحتوي التطبيق على ترجمات i18n أساسية ، مثل: القائمة ، والرأس ، والتذييل ، والمجلدات الأخرى مثل المنزل ، والتي تحتوي على ترجمات i18n للوحدة النمطية المحملة.

الشفرة

AppModule

قم أولاً بإعداد AppModule لاستدعاء forRoot () لـ TranslateModule ولتحميل تطبيق ملفات i18n الأساسية / (en | fr) .json

AppComponent

AppComponent هو مكون الجذر الخاص بك ، حيث يمكن للمستخدم ضبط اللغة من خلال النقر على زر في الرأس. ثم ترسل معلومات اللغة إلى متجرك للسماح لوحداتك الأخرى بمعرفة أن اللغة قد تغيرت ويجب عليها تغيير لغة مثيل خدمة الترجمة الخاص بها.

HomeModule (وحدة تحميل كسول)

في هذه الوحدة النمطية ، قم بالإعلان عن مثيل جديد لـ TranslateHttpLoader للحصول على ملف i18n الخاص بك في المنزل / (en | fr) .json

HomeComponent

الشيء الوحيد المتبقي هو استدعاء استخدام () لمثيل خدمة الترجمة الخاص به ، في كل مرة تتغير فيها اللغة ، في جميع مكونات الوحدات النمطية المحملة البطيئة الخاصة بك عن طريق الاشتراك في خاصية اللغة الحالية لمتجرك.

ملخص

هذا هو! أنت الآن على استعداد لتقسيم ملف i18n الكبير الخاص بك إلى ملف أصغر سيساعدك على الاحتفاظ بسهولة بملف الترجمات الخاص بك.

كي تختصر:

  1. في AppModule استدعاء forRoot ()
  2. في كل الوحدات النمطية المحملة البطيئة الخاصة بك ، اتصل بـChild () بمعزل: صواب ، وقم بإنشاء نسخة جديدة من TranslateHttpLoader مع المسار إلى ملفات i18n للوحدة النمطية
  3. في جميع مكالمات المكون الرئيسي للوحدة المحملة ، استخدم () خدمة TranslateService في كل مرة يغير فيها المستخدم اللغة