תרגום עם i18n

[avigail O]

שלום וברכה! להלן שלבים בהוספת תמיכה בשפות בעזרת i18n: (חומר נוסף תוכלי למצוא כאן: https://github.com/ngx-translate/core) לפני נוסיף את הספריה לניהול שפות- חשוב לציין שצריך קודם להכין קבצי json עם תרגומים בתקייה בשם “i18n” בתקיה assets. כל קובץ נקרא בשם השפה שאותה הוא מייצג (אנגלית= en.json, עברית= he.json) מבנה קובץ לדוגמה: {
home:”My Home”
} (הספריה תתרגם את הטקסטים לפי השפה שיתנו לה. אם יתנו לה he היא תפנה לקובץ בשם he.json וכן הלאה. לכן חשוב להקפיד על שמות נכונים של השפה) וכעת להתקנה: דבר ראשון יש להתקין את הספריה ע”י הרצת הפקודה: npm install @ngx-translate/core שנית, יש לייבא את הספריה הנ”ל בקובץ app.module.ts באופן הבא: יש לייבא את הספריות ע”י הוספת השורות ההבאות: import { TranslateHttpLoader } from ‘@ngx-translate/http-loader’;
import { TranslateModule, TranslateLoader } from ‘@ngx-translate/core’; בגוף הקובץ app.module.ts יש להגדיר את ההפניה לתקיה שציינו קודם (בשם i18n) המכילה את קבצי התרגום: (שימו לב שמשתמשים גם בספריה HttpClient. רוב הסיכויים שכבר התקנתם אותה קודם, אבל אם לא- יש להתקין גם אותה) export function httpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, ‘../../assets/i18n/’, ‘.json’);
} ולאחר מכן במערך של ה imports ניבא את הפונקציה שהגדרנו לעיל כך: imports: [
…….
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient]
}
}),
………
], עד כאן על ההתקנה. אופן השימוש: דבר ראשון נרצה להגדיר לספריה באיזה שפות להשתמש. בד”כ נגדיר את זה ב app.component.ts: נייבא ב constructor את הservise של ספרית התרגומים: constructor(private translate: TranslateService) {
ונגדיר עבור הספריה את שפת ברירת המחדל שלה (בשורה הראשונה) ואת השפה השימושית עכשיו (בשורה השניה) this.translate.setDefaultLang(‘en’);
this.translate.use(‘en’); כעת הדפדפן ישתמש בשפה האנגלית המכונה ‘en’ בקבצי התרגום. אפשר להשתמש בשורות הנ”ל כדי להחליף שפה ע”י לחיצת כפתור! אם למשל נרצה להחליף את השפה לעברית: this.translate.setDefaultLang(‘he’);
this.translate.use(‘he’); שימוש ב html: על מנת להשתמש בתרגום ב html נשתמש ב Pipe המובנה של הספריה בשם translate. דוגמה לשימוש: אם בקובץ en.json שלנו מוגדר התרגום הבא: {
home:”My Home”
} נשתמש במילה home ב html בצורה הבאה: {{‘home’|translate}} והטקסט שיוצג יהיה: My Home כמובן אנחנו כאן לכל שאלה נוספת… המון הצלחות!!!!!

[ns445540]

דבר ראשון תודה רבה!!! לפי מה שקראתי בגוגל יש את i18n ויש ngx translate הצורה שאת הבאת זה לא i18n? במה עדיף להשתמש באנגולר 8? תודה רבה

[avigail O]

למען הסדר הטוב- הספריה ngx translate עוטפת ומתבססת על הרכיב i18n של אנגולר. כלומר: i18n הוא רכיב בסיסי של אנגולר. ו ngx translate היא ספריה חיצונית שעוטפת ותומכת בזה. הדעה הרווחת והנכונה היא שעדיף להשתמש ב ngx translate. ישנן כמה סיבות: כאשר משתמשים ב i18n – בכל פעם שמחליפים את שפת התרגום- האפליקציה כולה נטענת מחדש. בשונה מ ngx translate שבה התחלופה “חלקה” ושקטה. כאשר משתמשים ב i18n – ניתן לשלב תרגום רק ב html. בשונה מ ngx translate שמאפשר לתרגם טקסט גם ב typeScript יש סיבות נוספות בעד ונגד. תוכלי לקרוא על כך באריכות כאן המון הצלחות!!!

[ns445540]

תודה! זה עזר לי מאוד!!!