شرکت جدیدی که دارم کار میکنم، اولین قدمم چندزبانه کردن کامپوننت های فارسی هست. برای این کار از ngx-translate استفاده کردم. در این مقاله، میخوام تجربه این یک هفته اخیر رو باهاتون به اشتراک بگذارم. تصمیمش هم با من نبود، از قبل گرفته شده بود.
در انگولار راه های مختلفی برای چند زبانه کردن اپلیکیشن هست:
کتابخانه i18n که built-in خود انگولار هست
کتابخانه ngx-translate که از همه پرطرفدارتره
کتابخانه transloco که از همه جدیدتره
تغییر زبان در زمان اجرا
پشتیبانی از فایلهای JSON
یادگیری آسان
مناسب برای پروژههای کوچک و بزرگ
امکان بارگذاری ترجمهها از API
پشتیبانی از پارامترهای داینامیک
تنظیمات ngx-translate در نسخه های مختلف Angular با هم فرق میکنه. یک قسمت از تفاوت ها هم در مورد استفاده از NgModules و مدل های جدیدتر Standalone هست.
این مقاله مربوط به Angular21 و مدل های Zoneless ( یا همون Standalone) هست.
ابتدا کتابخانههای موردنیاز را نصب میکنیم:
در پوشه assets فایلهای زیر را ایجاد کنید:
محتوای فایل انگلیسی en.json:
محتوای فایل فارسی fa.json:
در فایل app.config.ts به لیست Providers ، مقدار provideTranslateService رو اضافه میکنیم :
در این مرحله خطا میده و ریکوئست بارگذاری فایل ترجمه خطای ۴۰۴ میده
/assets/i18n/fa.json
برای حل این مشکل باید در فایل angular.json و در قسمت build ، دایرکتوری src/assets رو به لیست assets اضافه کنیم:
محتوای app.html رو هم به صورت زیر تغییر میدیم:
خطای دیگه ای که میگیریم ، مربوط به translate pipe هست که استفاده کردیم. باید این pipe رو در کامپوننت import کنیم:
نتیجه رو در صفحه اصلی می بینیم:
اول باید سرویس TranslateService رو وارد کامپوننت کنیم.
بعد هر جا نیاز داشتیم متن ها رو به روش زیر ترجمه کنیم:
\
فقط کافیه متغیری مثلا به اسم currentLang تعریف کنیم:
و اون رو در ngOnInit مقداردهی کنیم:
میتونیم اون رو در تمپلت هم استفاده کنیم:
برای آگاهی از تغییر زبان فعلی در کامپوننت کافیه مثل زیر عمل کنیم:
به امید روزای بهتر :)
موفق باشید :)
