انگولار ۲ و i18n در تایپاسکریپت

من دیدم که Angular2 برای کامپوننتهای خود i18n را پیادهسازی میکند و با استفاده از i18n (و تمام ویژگیهای مرتبط با آن مانند i18n-title، plurals و غیره ...) میتوانید قالبهای HTML خود را بینالمللی کنید.

اما من میخواستم بدانم چگونه میتوان رشتههایی که توسط کد تایپاسکریپت شما ارائه میشوند را بینالمللی کرد. به عنوان مثال، من یک پنجره بازشو دارم که بسته به خطایی که توسط بکاند من ایجاد میشود، پیام متفاوتی در آن چاپ میکنم. آن پیام توسط یک متغیر متصل به تمپلیت من ارائه میشود و من راهی با بینالمللیسازی Angular2 پیدا نکردم که آن متن را ترجمه کنم.

مثال سریع برای درک بهتر:

 typescript:
 errorMessage: string = '';
 private errorMapping: Map<number,String>;

 onError(error): void {
   this.errorMessage = errorMapping.get(error.code);
 }

 template:
 <pop-up>{{errorMessage}}</pop-up>

راهی برای انجام آن وجود دارد؟

اگر نه، آیا من هستم که آن را بهطرز بدی اجرا میکنم؟ آیا باید آن را بهطور متفاوتی انجام دهم؟

خیلی متشکرم از وقت و پاسخهای شما.

پاسخ شماره ۱

این یک سوال قدیمی است، اما Angular 5 هنوز پشتیبانی برای این ارائه نمیدهد، و مانند سوالکننده اصلی من هم در تلاش هستم تا از استفاده از کتابخانههای شخص ثالث اجتناب کنم، راهحل موقتی من به این صورت بود...

1. یک کلاس سرویس به نام TranslationsService تعریف کنید که یک متد عمومی برای دریافت یک نقشه کلید-مقدار از ترجمهها داشته باشد و یک متد عمومی دیگر برای بازیابی ترجمه برای یک کلید داده شده.

2. در صفحه ورود HTML خود، یعنی app.component.html، یک <span> برای هر ترجمهای که ممکن است بخواهید به صورت برنامهنویسی در هر جای برنامه خود به آن دسترسی پیدا کنید، اضافه کنید، یعنی...

   <span class="translation" #error_1200 i18n="@@error_1200">A Message already exists with this Name</span>

3. در فایل app.component.css خود، موارد زیر را اضافه کنید تا لیست ثابت ترجمههای شما که در بالا تعریف شده است، در مرورگر هنگام ورود نمایش داده نشود

   .translation {display: none;}

4. از پشتیبانی بومی i18n در Angular برای تعریف ترجمههای مورد نیاز برای تگهای span که در بالا تعریف کردهاید به روشی که معمولاً برای هر متن قابل ترجمه در هر فایل html در برنامه خود انجام میدهید، استفاده کنید.

5. در app.component.ts خود میتوانید به ترجمههایی که در html تعریف کردهاید متصل شوید، متن را از آنها بگیرید و یک Map از ترجمهها بسازید که میتواند به سرویس Translations شما ارسال شود. از آنجا که این کار در کامپوننت ورودی انجام میشود، سپس از هر کامپوننتی در برنامه شما که نیاز به دسترسی به یکی از این ترجمهها دارد، قابل دسترسی خواهد بود. کد به شکل زیر است:

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     @ViewChild('error_1200') error1200 : ElementRef;
   
     constructor(private translationsService: TranslationsService) { }
   
     ngOnInit() {
       let translations = new Map<string, string>();
       translations.set('error_1200', 
           this.error1200.nativeElement.textContent);
       this.translationsService.setTranslations(translations);
     }
   }
   

6. هر کدام از مؤلفههای برنامه شما که نیاز به یکی از این ترجمهها دارند، کافی است سرویس ترجمه خود را وارد کرده و از آن برای بازیابی آنچه نیاز دارید با استفاده از کلید مناسب استفاده کنید